import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { CHANGELOG } from "@/lib/changelog";

export function ChangelogList() {
  return (
    <div className="space-y-8 max-w-2xl">
      {CHANGELOG.map((entry, i) => (
        <div key={entry.version} className="space-y-3">
          <div className="flex items-center gap-2">
            <Badge variant={i === 0 ? "default" : "secondary"}>v{entry.version}</Badge>
            <span className="text-sm text-muted-foreground">{entry.date}</span>
          </div>

          {entry.notes && <p className="text-sm text-muted-foreground">{entry.notes}</p>}

          {entry.added && entry.added.length > 0 && (
            <div className="space-y-1.5">
              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Added</p>
              <ul className="space-y-1 text-sm list-disc pl-5">
                {entry.added.map((line, j) => <li key={j}>{line}</li>)}
              </ul>
            </div>
          )}

          {entry.fixed && entry.fixed.length > 0 && (
            <div className="space-y-1.5">
              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Fixed</p>
              <ul className="space-y-1 text-sm list-disc pl-5">
                {entry.fixed.map((line, j) => <li key={j}>{line}</li>)}
              </ul>
            </div>
          )}

          {entry.security && entry.security.length > 0 && (
            <div className="space-y-1.5">
              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Security</p>
              <ul className="space-y-1 text-sm list-disc pl-5">
                {entry.security.map((line, j) => <li key={j}>{line}</li>)}
              </ul>
            </div>
          )}

          {i < CHANGELOG.length - 1 && <Separator className="mt-6" />}
        </div>
      ))}
    </div>
  );
}