import React from 'react';
import { cn } from '../../utils/classNames';

interface ToggleRowProps {
  label: string;
  description?: string;
  checked: boolean;
  disabled?: boolean;
  onChange: (checked: boolean) => void;
  badge?: React.ReactNode;
}

const ToggleRow: React.FC<ToggleRowProps> = ({
  label,
  description,
  checked,
  disabled = false,
  onChange,
  badge,
}) => (
  <label
    className={cn(
      'flex items-center gap-4 rounded-xl border border-app-border bg-app-surface p-4 transition-colors',
      disabled ? 'cursor-not-allowed opacity-55' : 'cursor-pointer hover:border-app-border-strong',
    )}
  >
    <span className="min-w-0 flex-1 space-y-1">
      <span className="flex flex-wrap items-center gap-2 text-sm font-semibold text-app-text">
        {label}
        {badge}
      </span>
      {description && <span className="block text-[0.8rem] leading-5 text-app-muted">{description}</span>}
    </span>
    <span className="relative inline-flex h-6 w-11 shrink-0">
      <input
        type="checkbox"
        checked={checked}
        disabled={disabled}
        onChange={(event) => onChange(event.target.checked)}
        className="peer sr-only"
      />
      <span className="absolute inset-0 rounded-full border border-app-border bg-app-surface-muted transition peer-checked:border-brand peer-checked:bg-brand" />
      <span className="absolute left-[2px] top-[2px] h-5 w-5 rounded-full bg-white shadow transition peer-checked:translate-x-5" />
    </span>
  </label>
);

export default ToggleRow;