import Link from "next/link";

export type VideoIdListProps = {
  slug: string;
  ids: string[];
  ariaLabel: string;
  emptyAriaLabel: string;
  emptyMessage: string;
  itemAriaLabel: (id: string) => string;
};

export function VideoIdList({
  slug,
  ids,
  ariaLabel,
  emptyAriaLabel,
  emptyMessage,
  itemAriaLabel,
}: VideoIdListProps) {
  if (ids.length === 0) {
    return (
      <p className="text-sm text-muted-foreground" aria-label={emptyAriaLabel}>
        {emptyMessage}
      </p>
    );
  }
  return (
    <div
      aria-label={ariaLabel}
      className="rounded border border-border max-h-72 overflow-auto"
    >
      <ul className="divide-y divide-border">
        {ids.map((id) => (
          <li key={id} className="px-3 py-1.5">
            <Link
              href={`/channels/${slug}/videos/${encodeURIComponent(id)}`}
              aria-label={itemAriaLabel(id)}
              className="font-mono text-xs underline hover:text-foreground"
            >
              {id}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}