'use client';

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

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

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;
  return (
    <Card className={cn('relative', className)}>
      <div className="p-6">
        <div className="flex items-center justify-between mb-4 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>
            )}
            {onDownload && (
              <Button variant="outline" size="sm" onClick={onDownload}>
                <Download className="h-4 w-4" />
                Download
              </Button>
            )}
          </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 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>
  );
}