/**
 * Device Switcher Component
 * Toggle between desktop and mobile preview
 */

import { Button } from '@/components/ui/button';
import { Monitor, Smartphone } from 'lucide-react';
import type { DevicePreview } from '../types';

interface DeviceSwitcherProps {
  device: DevicePreview;
  onChange: (device: DevicePreview) => void;
}

export function DeviceSwitcher({ device, onChange }: DeviceSwitcherProps) {
  return (
    <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
      <Button
        variant={device === 'desktop' ? 'secondary' : 'ghost'}
        size="sm"
        className="h-8 px-3"
        onClick={() => onChange('desktop')}
      >
        <Monitor className="h-4 w-4 mr-1" />
        Desktop
      </Button>
      <Button
        variant={device === 'mobile' ? 'secondary' : 'ghost'}
        size="sm"
        className="h-8 px-3"
        onClick={() => onChange('mobile')}
      >
        <Smartphone className="h-4 w-4 mr-1" />
        Mobile
      </Button>
    </div>
  );
}

export default DeviceSwitcher;