'use client';

import { useProduct } from '@/lib/product-context';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Mic, Clock, Apple, Brain, type LucideIcon } from 'lucide-react';

const iconMap: Record<string, LucideIcon> = {
  Mic,
  Clock,
  Apple,
  Brain,
};

export function ProductSwitcher() {
  const { productId, setProductId, products } = useProduct();

  return (
    <div className="px-3 py-2">
      <label className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground px-3 mb-1 block">
        Product
      </label>
      <Select value={productId} onValueChange={setProductId}>
        <SelectTrigger className="w-full h-9 text-sm">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {products.map(p => {
            const Icon = iconMap[p.icon];
            return (
              <SelectItem key={p.id} value={p.id}>
                <span className="flex items-center gap-2">
                  {Icon && <Icon className="h-3.5 w-3.5" />}
                  {p.name}
                </span>
              </SelectItem>
            );
          })}
        </SelectContent>
      </Select>
    </div>
  );
}
