interface SwitchProps {
  checked: boolean
  onChange: (checked: boolean) => void
  label?: string
  vertical?: boolean
}

export function Switch({ checked, onChange, label, vertical = false }: SwitchProps) {
  if (vertical) {
    return (
      <label className="flex flex-col items-center gap-1 cursor-pointer">
        <div
          className={`relative w-4 h-12 border-2 transition-colors ${
            checked ? 'bg-white border-white' : 'bg-black border-white'
          }`}
          onClick={() => onChange(!checked)}
        >
          <div
            className={`absolute left-0 w-3 h-3 transition-transform ${
              checked ? 'translate-y-8 bg-black' : 'translate-y-0 bg-white'
            }`}
          />
        </div>
      </label>
    )
  }

  return (
    <label className="flex items-center gap-2 cursor-pointer">
      <div
        className={`relative w-8 h-4 border-2 transition-colors ${
          checked ? 'bg-white border-white' : 'bg-black border-white'
        }`}
        onClick={() => onChange(!checked)}
      >
        <div
          className={`absolute top-0 w-3 h-3 transition-transform ${
            checked ? 'translate-x-4 bg-black' : 'translate-x-0 bg-white'
          }`}
        />
      </div>
      {label && (
        <span className="font-mono text-[9px] text-white select-none">
          {label}
        </span>
      )}
    </label>
  )
}