"use client";

import { toggleChannelCleanupInclusionAction } from "../../channels/actions";

// Per-channel include/exclude switch for the aggregate cleanable-data total.
// Token-driven (semantic success / muted) so it recolors with every theme.
export function ChannelCleanupToggle({
  slug,
  excluded,
}: {
  slug: string;
  excluded: boolean;
}) {
  return (
    <form
      action={async () => {
        await toggleChannelCleanupInclusionAction(slug);
      }}
    >
      <button
        type="submit"
        aria-label={`toggle cleanup-total inclusion for ${slug}`}
        aria-pressed={!excluded}
        title={
          excluded
            ? "Excluded from the cleanable-data total. Click to include."
            : "Counted in the cleanable-data total. Click to exclude."
        }
        className={
          "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium border transition-colors " +
          (excluded
            ? "border-border text-muted-foreground hover:bg-accent"
            : "border-success/30 bg-success-soft text-success hover:bg-success/15")
        }
      >
        <span
          aria-hidden="true"
          className={
            "inline-block h-1.5 w-1.5 rounded-full " +
            (excluded ? "bg-muted-foreground/50" : "bg-success")
          }
        />
        {excluded ? "Excluded" : "Counted"}
      </button>
    </form>
  );
}