'use client';

import * as React from 'react';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';
import { Search } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import type { FigletFont } from '@/types/figlet';

export interface FontSelectorProps {
  fonts: FigletFont[];
  selectedFont: string;
  onSelectFont: (fontName: string) => void;
  className?: string;
}

export function FontSelector({ fonts, selectedFont, onSelectFont, className }: FontSelectorProps) {
  const [searchQuery, setSearchQuery] = React.useState('');

  const filteredFonts = React.useMemo(() => {
    if (!searchQuery) return fonts;

    const query = searchQuery.toLowerCase();
    return fonts.filter(font =>
      font.name.toLowerCase().includes(query)
    );
  }, [fonts, searchQuery]);

  return (
    <Card className={className}>
      <div className="p-6">
        <h3 className="text-sm font-medium mb-4">Select Font</h3>

        <div className="relative mb-4">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            type="text"
            placeholder="Search fonts..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9"
          />
        </div>

        <div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
          {filteredFonts.length === 0 ? (
            <div className="text-sm text-muted-foreground text-center py-8">
              No fonts found
            </div>
          ) : (
            filteredFonts.map((font) => (
              <button
                key={font.name}
                onClick={() => onSelectFont(font.name)}
                className={cn(
                  'w-full text-left px-3 py-2 rounded-md text-sm transition-colors',
                  'hover:bg-accent hover:text-accent-foreground',
                  selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
                )}
              >
                {font.name}
              </button>
            ))
          )}
        </div>

        <div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
          {filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''} available
        </div>
      </div>
    </Card>
  );
}