"use client"

import { cn } from "@/lib/utils"

type QuickSettingsOptionProps = {
  name: string
  label: string
  checked: boolean
  disabled?: boolean
  onSelect: () => void
  icon?: React.ReactNode
}

export function QuickSettingsOption({
  name,
  label,
  checked,
  disabled = false,
  onSelect,
  icon,
}: QuickSettingsOptionProps) {
  return (
    <label
      className={cn(
        "flex cursor-pointer items-center gap-3 rounded-md px-1 py-2 transition-colors",
        disabled
          ? "cursor-not-allowed opacity-45"
          : "hover:bg-mail-surface-muted"
      )}
    >
      <input
        type="radio"
        name={name}
        checked={checked}
        disabled={disabled}
        onChange={onSelect}
        className="size-[18px] shrink-0 accent-[#1a73e8] disabled:cursor-not-allowed"
      />
      <span
        className={cn(
          "min-w-0 flex-1 text-sm",
          checked
            ? "font-bold text-[#1a73e8] dark:text-white"
            : "text-foreground"
        )}
      >
        {label}
      </span>
      {icon ? <span className="shrink-0">{icon}</span> : null}
    </label>
  )
}

export function QuickSettingsCheckbox({
  label,
  checked,
  onChange,
  icon,
  helpLabel,
}: {
  label: string
  checked: boolean
  onChange: (checked: boolean) => void
  icon?: React.ReactNode
  helpLabel?: string
}) {
  return (
    <label className="flex cursor-pointer items-center gap-3 rounded-md px-1 py-2 hover:bg-mail-surface-muted">
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
        className="size-[18px] shrink-0 rounded-sm accent-[#1a73e8]"
      />
      <span className="min-w-0 flex-1 text-sm text-foreground">{label}</span>
      {helpLabel ? (
        <span
          className="flex size-5 shrink-0 items-center justify-center rounded-full text-xs text-[#5f6368]"
          title={helpLabel}
          aria-label={helpLabel}
        >
          ?
        </span>
      ) : null}
      {icon ? <span className="shrink-0">{icon}</span> : null}
    </label>
  )
}