import { cn } from '@/lib/utils';

interface BlankEditorMockupProps {
  className?: string;
}

/**
 * BlankEditorMockup Component
 *
 * A visual mockup of a content editor with writer's block.
 * Shows a partial sentence with blinking cursor and placeholder questions.
 */
export function BlankEditorMockup({ className = '' }: BlankEditorMockupProps) {
  return (
    <div className={cn('rounded-lg border bg-card overflow-hidden shadow-sm', className)}>
      {/* Toolbar */}
      <div className="border-b bg-muted/30 px-4 py-2 flex items-center gap-2">
        <button
          className="px-3 py-1.5 text-sm font-semibold text-foreground hover:bg-muted transition rounded"
          title="Bold"
        >
          B
        </button>
        <button
          className="px-3 py-1.5 text-sm italic text-foreground hover:bg-muted transition rounded"
          title="Italic"
        >
          I
        </button>
        <button
          className="px-3 py-1.5 text-sm underline text-foreground hover:bg-muted transition rounded"
          title="Underline"
        >
          U
        </button>

        <div className="w-px h-6 bg-border mx-1" />

        <button className="px-3 py-1.5 text-sm font-semibold text-foreground hover:bg-muted transition rounded">
          H1
        </button>
        <button className="px-3 py-1.5 text-sm font-semibold text-foreground hover:bg-muted transition rounded">
          H2
        </button>
      </div>

      {/* Content Area */}
      <div className="p-8 space-y-6">
        {/* Title */}
        <div className="space-y-1">
          <input
            type="text"
            value="Best SEO Plugins for WordPress in 2026"
            readOnly
            className="w-full text-3xl font-bold text-foreground bg-transparent outline-none"
          />
          <div className="h-1 bg-border" />
        </div>

        {/* Content with cursor */}
        <div className="space-y-4">
          <p className="text-foreground leading-relaxed">
            Choosing the right SEO plugin can make all the difference in your WordPress
            site&apos;s visibility...
            <span className="inline-block w-0.5 h-5 ml-1 bg-foreground animate-pulse" />
          </p>

          {/* Placeholder questions */}
          <div className="space-y-2 pt-4">
            <p className="text-sm text-muted-foreground italic flex items-start gap-2">
              <span className="text-xs mt-0.5">▸</span>
              What topics should I cover?
            </p>
            <p className="text-sm text-muted-foreground italic flex items-start gap-2">
              <span className="text-xs mt-0.5">▸</span>
              How long should this article be?
            </p>
            <p className="text-sm text-muted-foreground italic flex items-start gap-2">
              <span className="text-xs mt-0.5">▸</span>
              What are competitors ranking with?
            </p>
            <p className="text-sm text-muted-foreground italic flex items-start gap-2">
              <span className="text-xs mt-0.5">▸</span>
              Which keywords am I missing?
            </p>
          </div>
        </div>
      </div>

      {/* Caption */}
      <div className="border-t bg-muted/20 px-8 py-4">
        <p className="text-sm text-muted-foreground italic">
          I've been staring at this for 30 minutes...
        </p>
      </div>
    </div>
  );
}