interface EnabledSwitchRowProps {
  title: string;
  description: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
}

export default function EnabledSwitchRow({
  title,
  description,
  checked,
  onChange,
}: EnabledSwitchRowProps) {
  return (
    <label
      className={`flex w-full cursor-pointer items-center justify-between gap-4 rounded-lg border px-3 py-3 transition-colors focus-within:ring-1 focus-within:ring-accent/40 ${
        checked
          ? "border-accent/50 bg-accent-muted"
          : "border-surface-2 bg-surface-0 hover:bg-surface-1"
      }`}
    >
      <span className="min-w-0">
        <span className="block text-sm font-medium text-text-primary">{title}</span>
        <span className="mt-0.5 block text-xs text-text-muted">{description}</span>
      </span>

      <span className="flex shrink-0 items-center gap-2">
        <span
          className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${
            checked
              ? "bg-accent text-white"
              : "bg-surface-1 text-text-secondary"
          }`}
        >
          {checked ? "Enabled" : "Disabled"}
        </span>
        <span
          className={`relative h-6 w-11 rounded-full transition-colors ${
            checked ? "bg-accent" : "bg-surface-2"
          }`}
          aria-hidden="true"
        >
          <span
            className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${
              checked ? "translate-x-5" : "translate-x-0.5"
            }`}
          />
        </span>
      </span>

      <input
        type="checkbox"
        role="switch"
        checked={checked}
        onChange={(event) => onChange(event.target.checked)}
        aria-label={title}
        className="sr-only"
      />
    </label>
  );
}