import React from 'react'
import { Monitor, Smartphone } from 'lucide-react'
import FaIcon from './FaIcon'

/**
 * Icon-only Desktop / Mobile switch (the reference builder F:7634-7660): w-7 h-7 round buttons inside a rounded-full island.
 * Props: value ('desktop' | 'mobile'), onChange(value), dark (preview toolbar variant).
 */
export default function DeviceSwitcher({ value = 'desktop', onChange, dark = false }) {
  const item = (id, label, fa, Fallback) => {
    const active = value === id
    return (
      <button
        key={id}
        type="button"
        onClick={() => onChange && onChange(id)}
        aria-label={`${label} view`}
        aria-pressed={active}
        title={`${label} view`}
        data-device={id}
        className={`w-7 h-7 rounded-full flex items-center justify-center transition-colors cursor-pointer ${
          active ? (dark ? 'bg-white text-slate-900 shadow-sm' : 'bg-white text-blue-600 shadow-sm') : 'text-slate-500 hover:text-slate-900'
        }`}
      >
        <FaIcon fa={fa} fallback={Fallback} size={14} />
      </button>
    )
  }
  return (
    <div className="inline-flex items-center gap-0.5 p-0.5 rounded-full bg-slate-100" role="group" aria-label="Preview device" data-testid="device-switcher">
      {item('desktop', 'Desktop', 'fa-desktop', Monitor)}
      {item('mobile', 'Mobile', 'fa-mobile-alt', Smartphone)}
    </div>
  )
}