"use client";

import { Button } from "@/components/ui/button";
import { FileText } from "lucide-react";
import { useReportDesigner } from "@/contexts/ReportDesignerContext";

const TEMPLATES = [
  { id: "order", name: "발주서", icon: "📋" },
  { id: "invoice", name: "청구서", icon: "💰" },
  { id: "basic", name: "기본", icon: "📄" },
];

export function TemplatePalette() {
  const { applyTemplate } = useReportDesigner();

  const handleApplyTemplate = (templateId: string) => {
    applyTemplate(templateId);
  };

  return (
    <div className="space-y-2">
      {TEMPLATES.map((template) => (
        <Button
          key={template.id}
          variant="outline"
          size="sm"
          className="w-full justify-start gap-2 text-sm"
          onClick={() => handleApplyTemplate(template.id)}
        >
          <span>{template.icon}</span>
          <span>{template.name}</span>
        </Button>
      ))}
    </div>
  );
}