'use client';

import * as React from 'react';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Copy, Download } from 'lucide-react';
import { cn } from '@/lib/utils/cn';

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

export function FontPreview({ text, isLoading, onCopy, onDownload, className }: FontPreviewProps) {
  return (
    <Card className={cn('relative', className)}>
      <div className="p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-sm font-medium">Preview</h3>
          <div className="flex gap-2">
            {onCopy && (
              <Button variant="outline" size="sm" onClick={onCopy}>
                <Copy className="h-4 w-4" />
                Copy
              </Button>
            )}
            {onDownload && (
              <Button variant="outline" size="sm" onClick={onDownload}>
                <Download className="h-4 w-4" />
                Download
              </Button>
            )}
          </div>
        </div>

        <div className="relative min-h-[200px] bg-muted/50 rounded-lg p-4 overflow-x-auto">
          {isLoading ? (
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="text-sm text-muted-foreground">Generating...</div>
            </div>
          ) : text ? (
            <pre className="font-mono text-xs sm:text-sm whitespace-pre overflow-x-auto">
              {text}
            </pre>
          ) : (
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="text-sm text-muted-foreground">Your ASCII art will appear here</div>
            </div>
          )}
        </div>
      </div>
    </Card>
  );
}