"use client";

import { useTranslations } from "next-intl";

import {
  PanelSection,
  PropertyColorInput,
  PropertySlider,
} from "@/components/studio/properties/PropertyControls";
import { useLayerUpdater } from "@/components/studio/properties/useLayerUpdater";
import { getShapeProps } from "@/lib/studio-layer-props";
import type { Layer } from "@/lib/studio-types";

interface ShapeLayerPropertiesProps {
  layer: Layer;
}

export function ShapeLayerProperties({ layer }: ShapeLayerPropertiesProps) {
  const t = useTranslations("auto.componentsStudioPropertiesShapeLayerProperties");
  const { update, updateProps } = useLayerUpdater(layer);
  const shape = getShapeProps(layer.props);

  return (
    <PanelSection title={t("sectionTitle")}>
      <PropertyColorInput
        label={t("fillColor")}
        value={shape.fill}
        onChange={(fill) => updateProps({ fill })}
      />
      <PropertyColorInput
        label={t("strokeColor")}
        value={shape.stroke}
        onChange={(stroke) => updateProps({ stroke })}
      />
      <PropertySlider
        label={t("strokeWidth")}
        min={0}
        max={40}
        value={shape.strokeWidth}
        onChange={(strokeWidth) => updateProps({ strokeWidth })}
      />
      {shape.shape === "rect" ? (
        <PropertySlider
          label={t("borderRadius")}
          min={0}
          max={100}
          value={shape.cornerRadius}
          onChange={(cornerRadius) => updateProps({ cornerRadius })}
        />
      ) : null}
      <PropertySlider
        label={t("opacity")}
        min={0}
        max={100}
        value={Math.round(layer.opacity * 100)}
        formatValue={(value) => `${value}%`}
        onChange={(opacity) => update({ opacity: opacity / 100 })}
      />
    </PanelSection>
  );
}
