import { type ReactNode } from "react";
import ChannelLink from "./ChannelLink";

// The presentation shared by the channel manager's "excluded channel" tabs — Hidden and Blocked.
// A responsive grid of proper channel cards (avatar + name + open-on-YouTube, via ChannelLink) each
// with one reversing action, instead of a bare row of name chips. Both tabs pass the same shape; only
// the header icon/label, the action, and the copy differ.
export interface ExcludedChannel {
  id: string;
  title: string | null;
  handle?: string | null;
  thumbnail_url: string | null;
}

export default function ExcludedChannelList({
  channels,
  icon,
  title,
  hint,
  emptyText,
  actionLabel,
  actionIcon,
  onAction,
  onView,
}: {
  channels: ExcludedChannel[];
  icon: ReactNode;
  title: string;
  hint: string;
  emptyText: string;
  actionLabel: string;
  actionIcon: ReactNode;
  onAction: (id: string) => void;
  onView?: (c: ExcludedChannel) => void;
}) {
  if (channels.length === 0) return <p className="text-sm text-muted py-8">{emptyText}</p>;
  return (
    <>
      <div className="flex items-center gap-2 mb-3">
        {icon}
        <span className="text-xs uppercase tracking-wide text-muted">{title}</span>
      </div>
      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
        {channels.map((c) => (
          <div key={c.id} className="glass-card flex items-center gap-2 rounded-xl px-3 py-2">
            <div className="min-w-0 flex-1">
              <ChannelLink
                id={c.id}
                title={c.title}
                handle={c.handle}
                thumbnailUrl={c.thumbnail_url}
                onView={onView ? () => onView(c) : undefined}
              />
            </div>
            <button
              onClick={() => onAction(c.id)}
              title={actionLabel}
              aria-label={actionLabel}
              className="shrink-0 inline-flex items-center gap-1 rounded-full border border-border px-2 py-1 text-xs text-muted transition hover:border-accent hover:text-accent"
            >
              {actionIcon}
              {actionLabel}
            </button>
          </div>
        ))}
      </div>
      <p className="text-2xs text-muted mt-3">{hint}</p>
    </>
  );
}