"use client";

import * as React from "react";
import { Check, Copy } from "lucide-react";
import { cn } from "@/lib/utils";

const DEFAULT_LINES = [
  { prompt: true, text: "npx create-app@latest my-app" },
  { prompt: false, text: "✔ Scaffolding project…" },
  { prompt: false, text: "✔ Installing dependencies…" },
  { prompt: false, text: "✔ Done in 4.2s" },
  { prompt: true, text: "cd my-app && npm run dev" },
  { prompt: false, text: "▲ ready on http://localhost:3000" },
];

export function TerminalHero({
  title = "From zero to running in one command",
  subtitle = "No config, no lock-in. Scaffold, run, ship.",
  command = "npx create-app@latest my-app",
  lines = DEFAULT_LINES,
  className,
}: {
  title?: string;
  subtitle?: string;
  command?: string;
  lines?: { prompt: boolean; text: string }[];
  className?: string;
}) {
  const [visible, setVisible] = React.useState(0);
  const [copied, setCopied] = React.useState(false);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setVisible((value) => (value >= lines.length ? 0 : value + 1));
    }, 900);
    return () => clearInterval(timer);
  }, [lines.length]);

  React.useEffect(() => {
    if (!copied) return;
    const timeout = setTimeout(() => setCopied(false), 1800);
    return () => clearTimeout(timeout);
  }, [copied]);

  return (
    <div className={cn("grid w-full items-center gap-8 rounded-2xl border bg-card p-8 lg:grid-cols-2", className)}>
      <div className="space-y-5">
        <h1 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h1>
        <p className="text-pretty text-muted-foreground">{subtitle}</p>

        <button
          onClick={() => {
            navigator.clipboard.writeText(command).then(() => setCopied(true)).catch(() => {});
          }}
          className="group flex w-full items-center gap-3 rounded-lg border bg-muted/50 px-3 py-2.5 text-start font-mono text-xs transition-colors hover:bg-muted"
        >
          <span className="min-w-0 flex-1 truncate">$ {command}</span>
          {copied ? (
            <Check className="size-3.5 shrink-0 text-emerald-500" />
          ) : (
            <Copy className="size-3.5 shrink-0 text-muted-foreground group-hover:text-foreground" />
          )}
        </button>
      </div>

      <div dir="ltr" className="overflow-hidden rounded-xl border bg-neutral-950 shadow-xl">
        <div className="flex items-center gap-1.5 border-b border-white/10 px-4 py-2.5">
          <span className="size-2.5 rounded-full bg-red-500/80" />
          <span className="size-2.5 rounded-full bg-yellow-500/80" />
          <span className="size-2.5 rounded-full bg-green-500/80" />
          <span className="ms-2 font-mono text-[11px] text-white/40">bash</span>
        </div>

        <div className="min-h-48 space-y-1 p-4 font-mono text-xs leading-relaxed">
          {lines.slice(0, visible).map((line, index) => (
            <div key={index} className="flex gap-2">
              {line.prompt && <span className="text-violet-400">$</span>}
              <span className={line.prompt ? "text-white/90" : "text-white/50"}>{line.text}</span>
            </div>
          ))}
          <span className="inline-block h-3.5 w-1.5 animate-pulse bg-violet-400 align-middle" />
        </div>
      </div>
    </div>
  );
}
Related components
