import React from 'react';
import { SelectProps } from '@bigbinary/neetoui';

declare type Category = "sans-serif" | "serif" | "display" | "handwriting" | "monospace";
declare type Script = "arabic" | "bengali" | "chinese-simplified" | "chinese-traditional" | "cyrillic" | "cyrillic-ext" | "devanagari" | "greek" | "greek-ext" | "gujarati" | "gurmukhi" | "hebrew" | "japanese" | "kannada" | "khmer" | "korean" | "latin" | "latin-ext" | "malayalam" | "myanmar" | "oriya" | "sinhala" | "tamil" | "​telugu" | "thai" | "vietnamese";
declare type SortOption = "alphabet" | "popularity";
declare type Variant = "100" | "100italic" | "200" | "200italic" | "300" | "300italic" | "regular" | "italic" | "500" | "500italic" | "600" | "600italic" | "700" | "700italic" | "800" | "800italic" | "900" | "900italic";
interface Font {
    family: string;
    id: string;
    category: Category;
    scripts: Script[];
    variants: Variant[];
    kind?: string;
    version?: string;
    lastModified?: string;
    files?: Record<Variant, string>;
}
interface Options {
    pickerId: string;
    families: string[];
    categories: Category[];
    scripts: Script[];
    variants: Variant[];
    filter: (font: Font) => boolean;
    limit: number;
    sort: SortOption;
}

interface GoogleFontPickerProps extends SelectProps {
  activeFontFamily?: string;
  onChange?: (fontFamily: string) => void;
  fontManagerOptions?: Options;
}
/**
 *
 * A component that allows users to choose an option from a list of font choices, presented as a dropdown menu.
 *
 * ![image](https://github.com/user-attachments/assets/72a74d39-0f73-4701-a324-6ae6a81791a9|height=200|width=300)
 *
 * @example 
 *
 * import { useState } from "react";
 * import GoogleFontPicker from "@bigbinary/neeto-molecules/GoogleFontPicker";
 * 
 * const GoogleFontPickerContainer = () => {
 *   const [selectedFont, setSelectedFont] = useState("Open Sans");
 * 
 *   const handleFontChange = (fontFamily) => {
 *     setSelectedFont(fontFamily);
 *   };
 * 
 *   return (
 *     <div>
 *       <h2>Selected Font: {selectedFont}</h2>
 *       <GoogleFontPicker
 *         activeFontFamily={selectedFont}
 *         fontManagerOptions={{ limit: 300 }}
 *         onChange={handleFontChange}
 *       />
 *     </div>
 *   );
 * };
 * @endexample
*/
declare const GoogleFontPicker: React.FC<GoogleFontPickerProps>;

export { GoogleFontPicker as default };