"use client";

import type { DividerBlockProps } from "@/features/editor/state/editorStore";

export type DividerPropertiesPanelProps = {
  dividerProps: DividerBlockProps;
  selectedBlockId: string;
  updateBlock: (id: string, partial: Partial<DividerBlockProps>) => void;
};

export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBlock }: DividerPropertiesPanelProps) {
  return (
    <>
      <div className="space-y-1">
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>정렬</span>
          <select
            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
            aria-label="구분선 정렬"
            value={dividerProps.align}
            onChange={(e) => {
              const value = e.target.value as DividerBlockProps["align"];
              updateBlock(selectedBlockId, { align: value } as any);
            }}
          >
            <option value="left">왼쪽</option>
            <option value="center">가운데</option>
            <option value="right">오른쪽</option>
          </select>
        </label>
      </div>
      <div className="space-y-1">
        <label className="flex flex-col gap-1 text-xs text-slate-400">
          <span>두께</span>
          <select
            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
            aria-label="구분선 두께"
            value={dividerProps.thickness}
            onChange={(e) => {
              const value = e.target.value as DividerBlockProps["thickness"];
              updateBlock(selectedBlockId, { thickness: value } as any);
            }}
          >
            <option value="thin">얇게</option>
            <option value="medium">보통</option>
          </select>
        </label>
      </div>
    </>
  );
}