Testimonial

"use client";
import { Star } from "lucide-react";

type State = "single" | "grid" | "compact";

const Q = [
{ name: "陳冠廷", role: "前端工程師 @ Linear", quote: "最完整的前端模式收藏,幾乎每天都會回來查。" },
{ name: "Sarah Kim", role: "Design Engineer", quote: "Apple 系列的動效很到位,直接救了我們的 onboarding。" },
{ name: "Yuki Tanaka", role: "Indie Hacker", quote: "從 hero 到 footer 全有,我的 landing page 半天搞定。" },
{ name: "陳哲明", role: "CTO @ startup", quote: "團隊新人入職第一天就推他們先把這站讀完。" },
];

export function Testimonial({ state = "single" }: { state?: State }) {
if (state === "compact") {
  return (
    <div className="flex w-full max-w-xl items-center gap-3 rounded-lg border border-border bg-background/30 p-4">
      <div className="grid h-10 w-10 place-items-center rounded-full bg-lab-accent/20 font-mono text-xs text-lab-accent">
        陳
      </div>
      <div className="flex-1">
        <p className="text-xs italic text-foreground">"{Q[0].quote}"</p>
        <p className="mt-1 font-mono text-[10px] text-muted-foreground">— {Q[0].name}, {Q[0].role}</p>
      </div>
    </div>
  );
}

if (state === "grid") {
  return (
    <div className="grid w-full grid-cols-2 gap-3">
      {Q.map((q) => (
        <div key={q.name} className="rounded-lg border border-border bg-background/30 p-4">
          <div className="mb-2 flex gap-0.5 text-amber-500">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star key={i} className="h-3 w-3 fill-current" />
            ))}
          </div>
          <p className="text-xs leading-relaxed text-foreground">"{q.quote}"</p>
          <p className="mt-3 font-mono text-[10px] text-muted-foreground">— {q.name} · {q.role}</p>
        </div>
      ))}
    </div>
  );
}

return (
  <div className="w-full max-w-xl rounded-xl border border-border bg-background/30 p-6">
    <div className="mb-3 flex gap-0.5 text-amber-500">
      {Array.from({ length: 5 }).map((_, i) => (
        <Star key={i} className="h-4 w-4 fill-current" />
      ))}
    </div>
    <p className="text-base italic leading-relaxed text-foreground">"{Q[0].quote}"</p>
    <div className="mt-4 flex items-center gap-3">
      <div className="grid h-10 w-10 place-items-center rounded-full bg-lab-accent/20 font-mono text-xs text-lab-accent">
        陳
      </div>
      <div>
        <p className="text-xs font-medium">{Q[0].name}</p>
        <p className="font-mono text-[10px] text-muted-foreground">{Q[0].role}</p>
      </div>
    </div>
  </div>
);
}