import type { InputHTMLAttributes, ReactNode } from 'react';

type PlatformPillSwitchProps = Omit<
  InputHTMLAttributes<HTMLInputElement>,
  'children' | 'type'
> & {
  label: ReactNode;
};

/**
 * 平台胶囊开关。
 * 统一承载图片面板中类似 AI 重绘的 label + switch 语义和视觉。
 */
export function PlatformPillSwitch({
  label,
  checked,
  disabled,
  className,
  ...inputProps
}: PlatformPillSwitchProps) {
  return (
    <label
      className={[
        'inline-flex cursor-pointer items-center gap-2 rounded-full border border-white/80 bg-white/94 px-3 py-2 text-xs font-black text-[var(--platform-text-strong)] shadow-sm backdrop-blur',
        disabled ? 'cursor-not-allowed opacity-55' : null,
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      <span>{label}</span>
      <input
        {...inputProps}
        role="switch"
        type="checkbox"
        checked={checked}
        disabled={disabled}
        className="sr-only"
      />
      <span
        aria-hidden="true"
        className={[
          'relative h-5 w-9 rounded-full transition',
          checked ? 'bg-[var(--platform-accent)]' : 'bg-zinc-300',
        ].join(' ')}
      >
        <span
          className={[
            'absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition',
            checked ? 'left-[1.125rem]' : 'left-0.5',
          ].join(' ')}
        />
      </span>
    </label>
  );
}
