import { Label } from '@/components/ui/label';
import { SearchableSelect } from '@/components/ui/searchable-select';
import { FontPickerProps } from '@/types/typography';
import { useState } from 'react';
import { useGoogleFonts } from '@/hooks/useGoogleFonts';

export function FontPicker({ value, onValueChange, isClearable = false }: FontPickerProps) {
  const [searchTerm, setSearchTerm] = useState('');
  const { fonts, isLoading } = useGoogleFonts(searchTerm);

  return (
    <div className='space-y-2'>
      <Label>Font Family</Label>
      <SearchableSelect
        options={fonts ?? []}
        value={value}
        onChange={(value) => onValueChange(value as string)}
        onSearch={(value) => setSearchTerm(value)}
        loading={isLoading}
        isClearable={isClearable}
      />
    </div>
  );
}
