import React from 'react';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Type } from 'lucide-react';

const FONT_OPTIONS = [
  { value: 'helvetica', label: 'Helvetica' },
  { value: 'times', label: 'Times New Roman' },
  { value: 'courier', label: 'Courier' },
];

const SIZE_OPTIONS = ['8', '9', '10', '11', '12'];

const ALIGN_OPTIONS = [
  { value: 'left', label: 'Left' },
  { value: 'justify', label: 'Justified' },
];

export default function PdfStylingControls({ pdfConfig, onChange }) {
  const handleChange = (key, value) => {
    onChange({ ...pdfConfig, [key]: value });
  };

  return (
    <Accordion type="single" collapsible className="w-full bg-muted/50 rounded-lg border">
      <AccordionItem value="pdf-styling" className="border-none">
        <AccordionTrigger className="px-4 py-3 text-muted-foreground font-medium hover:no-underline">
          <div className="flex items-center gap-2">
            <Type className="w-4 h-4" />
            PDF Font & Styling
          </div>
        </AccordionTrigger>
        <AccordionContent className="px-4 pb-4 pt-2 bg-background rounded-b-lg border-t">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <Label>Font Family</Label>
              <Select value={pdfConfig.font} onValueChange={(v) => handleChange('font', v)}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  {FONT_OPTIONS.map(f => (
                    <SelectItem key={f.value} value={f.value}>{f.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Font Size (pt)</Label>
              <Select value={pdfConfig.fontSize} onValueChange={(v) => handleChange('fontSize', v)}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  {SIZE_OPTIONS.map(s => (
                    <SelectItem key={s} value={s}>{s}pt</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Text Alignment</Label>
              <Select value={pdfConfig.textAlign || 'left'} onValueChange={(v) => handleChange('textAlign', v)}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  {ALIGN_OPTIONS.map(a => (
                    <SelectItem key={a.value} value={a.value}>{a.label}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
