import React from 'react'
import { X, Monitor, Smartphone, RotateCcw } from 'lucide-react'

/**
 * Full-screen preview toolbar (the reference builder F:7815-7896): light pill, icon-only buttons — Exit, Desktop/Mobile, extra
 * actions (children), Restart.
 * Props: device, onDeviceChange(device), onExit(), onRestart(), children.
 */
export default function PreviewToolbar({ device = 'desktop', onDeviceChange, onExit, onRestart, children }) {
  const btn = 'w-9 h-9 rounded-full flex items-center justify-center text-slate-600 hover:text-slate-900 hover:bg-slate-100 transition-colors cursor-pointer'
  const dev = (id, label, Icon) => (
    <button type="button" onClick={() => onDeviceChange && onDeviceChange(id)} aria-label={`${label} preview`} aria-pressed={device === id} title={`${label} preview`}
      className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors cursor-pointer ${device === id ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-900'}`}>
      <Icon className="w-4 h-4" aria-hidden="true" />
    </button>
  )
  return (
    <div className="inline-flex items-center gap-1.5 p-1.5 rounded-full bg-white/95 shadow-2xl shadow-slate-950/25 backdrop-blur-sm" role="toolbar" aria-label="Preview controls" data-testid="preview-toolbar">
      <button type="button" onClick={onExit} className={btn} aria-label="Exit preview (Esc)" title="Exit preview (Esc)">
        <X className="w-4 h-4" aria-hidden="true" />
      </button>
      <div className="inline-flex items-center gap-0.5 p-0.5 rounded-full bg-slate-100">
        {dev('desktop', 'Desktop', Monitor)}
        {dev('mobile', 'Mobile', Smartphone)}
      </div>
      {children}
      <button type="button" onClick={onRestart} className={btn} aria-label="Restart preview" title="Restart preview (clear answers)">
        <RotateCcw className="w-4 h-4" aria-hidden="true" />
      </button>
    </div>
  )
}