import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { IconGrid } from "./IconGrid";
import { IconPickerProvider } from "./IconPickerContext";
import { SearchBar } from "./SearchBar";
import { IconType } from "./types";

interface IconPickerProps {
  defaultSize?: number;
  defaultColor?: string;
  defaultValue?: string;
  onChange?: (icon: IconType & { color: string }) => void;
  className?: string;
  hideSizeAndColor?: boolean;
}

/**
 * IconPicker is the main wrapper for the icon picker UI.
 * It wraps content in a context provider and renders UI components.
 */
export function IconPicker({
  defaultSize,
  defaultColor,
  defaultValue,
  onChange,
  className = "",
  hideSizeAndColor = false,
}: IconPickerProps) {
  return (
    <IconPickerProvider
      defaultSize={defaultSize}
      defaultColor={defaultColor}
      defaultValue={defaultValue}
      onChange={onChange}
      hideSizeAndColor={hideSizeAndColor}
    >
      <Card
        className={`w-full max-w-3xl shadow-lg border-primary/10 gap-3  ${className}`}
      >
        <CardHeader>
          <SearchBar />
        </CardHeader>

        <Separator />

        <CardContent className='p-0'>
          <IconGrid />
        </CardContent>
        <Separator />
        <CardFooter className='flex justify-between text-xs text-muted-foreground'>
          <p>2350+ icon's collection</p>
        </CardFooter>
      </Card>
    </IconPickerProvider>
  );
}