figlet-ui/components/converter/FontPreview.tsx

'use client';

import * as React from 'react';
import { toPng } from 'html-to-image';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Skeleton } from '@/components/ui/Skeleton';
import { EmptyState } from '@/components/ui/EmptyState';
import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Type } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import { useToast } from '@/components/ui/Toast';

export interface FontPreviewProps {
  text: string;
  font?: string;
  isLoading?: boolean;
  onCopy?: () => void;
  onDownload?: () => void;
  onShare?: () => void;
  className?: string;
}

type TextAlign = 'left' | 'center' | 'right';

export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare, className }: FontPreviewProps) {
  const lineCount = text ? text.split('\n').length : 0;
  const charCount = text ? text.length : 0;
  const previewRef = React.useRef<HTMLDivElement>(null);
  const [textAlign, setTextAlign] = React.useState<TextAlign>('left');
  const [fontSize, setFontSize] = React.useState<'xs' | 'sm' | 'base'>('sm');
  const { addToast } = useToast();

  const handleExportPNG = async () => {
    if (!previewRef.current || !text) return;

    try {
      const dataUrl = await toPng(previewRef.current, {
        backgroundColor: getComputedStyle(previewRef.current).backgroundColor,
        pixelRatio: 2,
      });

      const link = document.createElement('a');
      link.download = `figlet-${font || 'export'}-${Date.now()}.png`;
      link.href = dataUrl;
      link.click();

      addToast('Exported as PNG!', 'success');
    } catch (error) {
      console.error('Failed to export PNG:', error);
      addToast('Failed to export PNG', 'error');
    }
  };
  return (
    <Card className={cn('relative', className)}>
      <div className="p-6">
        <div className="space-y-3 mb-4">
          <div className="flex items-center justify-between flex-wrap gap-2">
            <div className="flex items-center gap-2">
              <h3 className="text-sm font-medium">Preview</h3>
              {font && (
                <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
                  {font}
                </span>
              )}
            </div>
            <div className="flex gap-2 flex-wrap">
              {onCopy && (
                <Button variant="outline" size="sm" onClick={onCopy}>
                  <Copy className="h-4 w-4" />
                  Copy
                </Button>
              )}
              {onShare && (
                <Button variant="outline" size="sm" onClick={onShare} title="Copy shareable URL">
                  <Share2 className="h-4 w-4" />
                  Share
                </Button>
              )}
              <Button variant="outline" size="sm" onClick={handleExportPNG} title="Export as PNG">
                <ImageIcon className="h-4 w-4" />
                PNG
              </Button>
              {onDownload && (
                <Button variant="outline" size="sm" onClick={onDownload}>
                  <Download className="h-4 w-4" />
                  TXT
                </Button>
              )}
            </div>
          </div>

          {/* Controls */}
          <div className="flex items-center gap-2 flex-wrap">
            <div className="flex items-center gap-1 border rounded-md p-1">
              <button
                onClick={() => setTextAlign('left')}
                className={cn(
                  'p-1.5 rounded transition-colors',
                  textAlign === 'left' ? 'bg-accent' : 'hover:bg-accent/50'
                )}
                title="Align left"
              >
                <AlignLeft className="h-3.5 w-3.5" />
              </button>
              <button
                onClick={() => setTextAlign('center')}
                className={cn(
                  'p-1.5 rounded transition-colors',
                  textAlign === 'center' ? 'bg-accent' : 'hover:bg-accent/50'
                )}
                title="Align center"
              >
                <AlignCenter className="h-3.5 w-3.5" />
              </button>
              <button
                onClick={() => setTextAlign('right')}
                className={cn(
                  'p-1.5 rounded transition-colors',
                  textAlign === 'right' ? 'bg-accent' : 'hover:bg-accent/50'
                )}
                title="Align right"
              >
                <AlignRight className="h-3.5 w-3.5" />
              </button>
            </div>

            <div className="flex items-center gap-1 border rounded-md p-1">
              <button
                onClick={() => setFontSize('xs')}
                className={cn(
                  'px-2 py-1 text-xs rounded transition-colors',
                  fontSize === 'xs' ? 'bg-accent' : 'hover:bg-accent/50'
                )}
              >
                XS
              </button>
              <button
                onClick={() => setFontSize('sm')}
                className={cn(
                  'px-2 py-1 text-xs rounded transition-colors',
                  fontSize === 'sm' ? 'bg-accent' : 'hover:bg-accent/50'
                )}
              >
                SM
              </button>
              <button
                onClick={() => setFontSize('base')}
                className={cn(
                  'px-2 py-1 text-xs rounded transition-colors',
                  fontSize === 'base' ? 'bg-accent' : 'hover:bg-accent/50'
                )}
              >
                MD
              </button>
            </div>
          </div>
        </div>

        {!isLoading && text && (
          <div className="flex gap-4 mb-2 text-xs text-muted-foreground">
            <span>{lineCount} lines</span>
            <span>•</span>
            <span>{charCount} chars</span>
          </div>
        )}

        <div
          ref={previewRef}
          className={cn(
            'relative min-h-[200px] bg-muted/50 rounded-lg p-4 overflow-x-auto',
            textAlign === 'center' && 'text-center',
            textAlign === 'right' && 'text-right'
          )}
        >
          {isLoading ? (
            <div className="space-y-3">
              <Skeleton className="h-6 w-3/4" />
              <Skeleton className="h-6 w-full" />
              <Skeleton className="h-6 w-5/6" />
              <Skeleton className="h-6 w-2/3" />
              <Skeleton className="h-6 w-full" />
              <Skeleton className="h-6 w-4/5" />
            </div>
          ) : text ? (
            <pre className={cn(
              'font-mono whitespace-pre overflow-x-auto animate-in',
              fontSize === 'xs' && 'text-[10px]',
              fontSize === 'sm' && 'text-xs sm:text-sm',
              fontSize === 'base' && 'text-sm sm:text-base'
            )}>
              {text}
            </pre>
          ) : (
            <EmptyState
              icon={Type}
              title="Start typing to see your ASCII art"
              description="Enter text in the input field above to generate ASCII art with the selected font"
              className="py-8"
            />
          )}
        </div>
      </div>
    </Card>
  );
}