"use client";

export interface ChangelogEntry {
  version: string;
  date: string;
  changes: string[];
}

interface BlockChangelogProps {
  changelog: ChangelogEntry[];
}

export function BlockChangelog({ changelog }: BlockChangelogProps) {
  if (!changelog || changelog.length === 0) return null;

  return (
    <section className="space-y-3">
      <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
        История версий
      </h2>
      <div className="space-y-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
        {changelog.map((entry) => (
          <div
            key={entry.version}
            className="p-3 rounded-lg"
            style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
          >
            <p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>
              {entry.version} — {entry.date}
            </p>
            <ul className="list-disc list-inside space-y-0.5 text-xs">
              {entry.changes.map((change, i) => (
                <li key={i}>{change}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}