/**
 * Typography Section
 * Font family and size settings with searchable Google Fonts
 */

import { useState } from 'react';
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { GlobalTypographyPicker } from '@/components/ui/global-typography-picker';
import { ChevronDown, Type } from 'lucide-react';
import type { EmailTypography } from '../types';

interface TypographySectionProps {
  typography: EmailTypography;
  onUpdate: (updates: Partial<EmailTypography>) => void;
}

export function TypographySection({ typography, onUpdate }: TypographySectionProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <CollapsibleTrigger className="flex items-center justify-between w-full p-4 border-b hover:bg-muted/50 transition-colors">
        <div className="flex items-center gap-2">
          <Type className="h-4 w-4 text-muted-foreground" />
          <span className="font-medium">Typography</span>
        </div>
        <ChevronDown
          className={`h-4 w-4 text-muted-foreground transition-transform ${
            isOpen ? 'rotate-180' : ''
          }`}
        />
      </CollapsibleTrigger>
      <CollapsibleContent className="p-4 space-y-4 border-b">
        {/* Font Family */}
        <GlobalTypographyPicker
          label="Font Family"
          value={typography.fontFamily}
          onChange={(value) => onUpdate({ fontFamily: value })}
          globalTokenId="body"
          featureDefault="Arial, Helvetica, sans-serif"
        />

        {/* Heading Size */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label>Heading Size</Label>
            <span className="text-sm text-muted-foreground">
              {typography.headingSize}px
            </span>
          </div>
          <Slider
            value={[typography.headingSize]}
            onValueChange={([value]) => onUpdate({ headingSize: value })}
            min={16}
            max={36}
            step={1}
          />
        </div>

        {/* Body Size */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label>Body Text Size</Label>
            <span className="text-sm text-muted-foreground">
              {typography.bodySize}px
            </span>
          </div>
          <Slider
            value={[typography.bodySize]}
            onValueChange={([value]) => onUpdate({ bodySize: value })}
            min={10}
            max={20}
            step={1}
          />
        </div>

        {/* Line Height */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label>Line Height</Label>
            <span className="text-sm text-muted-foreground">
              {typography.lineHeight}
            </span>
          </div>
          <Slider
            value={[typography.lineHeight * 10]}
            onValueChange={([value]) => onUpdate({ lineHeight: value / 10 })}
            min={12}
            max={24}
            step={1}
          />
        </div>

        {/* Preview */}
        <div className="mt-4 p-3 bg-muted/30 rounded-md">
          <p
            className="text-center"
            style={{
              fontFamily: typography.fontFamily,
              fontSize: `${typography.headingSize}px`,
              lineHeight: typography.lineHeight,
            }}
          >
            Heading Preview
          </p>
          <p
            className="text-center mt-2 text-muted-foreground"
            style={{
              fontFamily: typography.fontFamily,
              fontSize: `${typography.bodySize}px`,
              lineHeight: typography.lineHeight,
            }}
          >
            Body text preview. This is how your email content will look.
          </p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

export default TypographySection;