import ColorPicker from "@/components/ColorPicker";
import Input from "@/components/Input";
import { usePencilDefaultsStore } from "@/pages/editor/store/pencilDefaultsStore";
import { Brush } from "iconsax-react";
import { type FC } from "react";

const PencilInstruction: FC = () => {
  const { defaults, updateDefaults } = usePencilDefaultsStore();

  return (
    <div className="mt-9 space-y-4">
      <div className="flex items-start gap-2 text-sm text-gray-600">
        <Brush size={18} color="#666" variant="Outline" className="mt-0.5 shrink-0" />
        <div className="space-y-1">
          <p>کلیک کرده و بکشید تا آزاد نقاشی کنید (مانند Pencil در Figma).</p>
          <p className="text-xs text-gray-500">
            برای رسم نقطه‌به‌نقطه از ابزار «سفارشی» استفاده کنید.
          </p>
        </div>
      </div>

      <ColorPicker
        label="رنگ قلم"
        value={defaults.stroke}
        onChange={(value) => updateDefaults({ stroke: value })}
      />
      <Input
        label="ضخامت قلم"
        type="number"
        min={1}
        max={50}
        value={defaults.strokeWidth}
        onChange={(e) =>
          updateDefaults({
            strokeWidth: Math.max(1, parseInt(e.target.value) || 1),
          })
        }
      />
    </div>
  );
};

export default PencilInstruction;
