"use client";

import { toggleChannelBuildInclusionAction } from "../actions";

export function ChannelBuildToggle({
  slug,
  excluded,
}: {
  slug: string;
  excluded: boolean;
}) {
  return (
    <form
      action={async () => {
        await toggleChannelBuildInclusionAction(slug);
      }}
    >
      <button
        type="submit"
        aria-label={`toggle build inclusion for ${slug}`}
        aria-pressed={!excluded}
        title={
          excluded
            ? "Excluded from the next export build. Click to include."
            : "Included in the next export build. 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-muted"
            : "border-success/30 bg-success-soft text-success hover:bg-success/20")
        }
      >
        <span
          aria-hidden="true"
          className={
            "inline-block h-1.5 w-1.5 rounded-full " +
            (excluded ? "bg-muted-foreground" : "bg-success")
          }
        />
        {excluded ? "Skipped" : "Included"}
      </button>
    </form>
  );
}