"use client";

import { useTranslations } from "next-intl";
import { useState } from "react";

import { PropertySelect } from "@/components/studio/properties/PropertyControls";
import { SidebarPanelShell } from "@/components/studio/sidebar/SidebarPanelShell";
import { Button } from "@/components/ui/button";
import { FONT_FAMILY_OPTIONS } from "@/lib/studio-layer-props";
import { useStudioStore } from "@/lib/studio-store";

export function FontSidebarContent() {
  const t = useTranslations("auto.componentsStudioSidebarFontSidebarContent");
  const applyFontFamilyToAllTextLayers = useStudioStore(
    (state) => state.applyFontFamilyToAllTextLayers
  );
  const [fontFamily, setFontFamily] = useState<string>(
    FONT_FAMILY_OPTIONS[0].value
  );

  const footer = (
    <Button
      type="button"
      variant="outline"
      className="w-full border-gray-200 bg-white text-gray-700 hover:bg-gray-50 hover:text-gray-900"
      onClick={() => applyFontFamilyToAllTextLayers(fontFamily)}
    >
      {t("applyToAll")}
    </Button>
  );

  return (
    <SidebarPanelShell title={t("title")} footer={footer}>
      <PropertySelect
        label={t("fontFamily")}
        value={fontFamily}
        options={FONT_FAMILY_OPTIONS.map((item) => ({
          label: item.label,
          value: item.value,
        }))}
        onChange={setFontFamily}
      />
    </SidebarPanelShell>
  );
}