PrivyDrop/frontend/components/Editor/EditorToolbar/FontTools.tsx

import { Type, Palette } from "lucide-react";
import { SelectMenu } from "../components/SelectMenu";
import { StyleOption, FontStyleType } from "../types";

interface FontToolsProps {
  fontFamilies: StyleOption[];
  fontSizes: StyleOption[];
  colors: StyleOption[];
  setFontStyle: (property: FontStyleType, value: string) => void;
}

export function FontTools({
  fontFamilies,
  fontSizes,
  colors,
  setFontStyle,
}: FontToolsProps) {
  return (
    <div className="flex flex-wrap gap-1">
      <SelectMenu
        options={fontFamilies}
        onChange={(value) => setFontStyle("family", value)}
        icon={Type}
        placeholder="Font"
        className="text-sm"
      />
      <SelectMenu
        options={fontSizes}
        onChange={(value) => setFontStyle("size", value)}
        icon={Type}
        placeholder="Size"
        className="text-sm w-16"
      />
      <SelectMenu
        options={colors}
        onChange={(value) => setFontStyle("color", value)}
        icon={Palette}
        placeholder="Color"
        className="text-sm w-20"
      />
    </div>
  );
}