import { IconColorPicker } from "./IconColorPicker";
import { useIconPicker } from "./IconPickerContext";
import { Slider } from "../ui/slider";
import { Badge } from "../ui/badge";

export default function FontAndColor() {
  const { size, setSize, hideSizeAndColor } = useIconPicker();

  if (hideSizeAndColor) return null;

  return (
    <div className='px-6'>
      <div className='flex justify-center items-center gap-2 border mt-2 p-2 rounded-md relative'>
        <Badge variant={"outline"} className=' absolute -top-3 left-3 bg-white'>
          Size & Color
        </Badge>
        <div className=' w-full flex justify-center items-center gap-2'>
          <Slider
            title='Icon Size'
            defaultValue={[size]}
            min={0}
            max={50}
            step={1}
            className={" w-full"}
            onValueChange={(value) => setSize(+value)}
          />

          <p className=' border p-1 px-2 rounded-md text-foreground/60'>
            {size}px
          </p>
        </div>

        <IconColorPicker />
      </div>
    </div>
  );
}