import { Toggle } from "@/components/ui/toggle";

const TEXT_MARKS = [
  { value: "bold", label: "Bold", Icon: Bold },
  { value: "italic", label: "Italic", Icon: Italic },
  { value: "underline", label: "Underline", Icon: TextUnderline },
];

export function TextToolbar() {
  const [marks, setMarks] = useState<string[]>(["bold"]);

  function toggleMark(value: string, pressed: boolean) {
    setMarks((current) => {
      if (pressed) {
        return [...current, value];
      }

      return current.filter((mark) => mark !== value);
    });
  }

  return (
    <div className="flex gap-1">
      {TEXT_MARKS.map(({ value, label, Icon }) => (
        <Toggle
          key={value}
          variant="outline"
          size="sm"
          aria-label={label}
          pressed={marks.includes(value)}
          onPressedChange={(pressed) => toggleMark(value, pressed)}
        >
          <Icon />
        </Toggle>
      ))}
    </div>
  );
}

import { Toggle } from "@/components/ui/toggle";

export function DraftsFilter() {
  const [showDrafts, setShowDrafts] = useState(false);

  return (
    <Toggle pressed={showDrafts} onPressedChange={setShowDrafts}>
      Show drafts
    </Toggle>
  );
}