low-code-react-app-b/src/components/atoms/Switch.tsx

import { Switch as ShadcnSwitch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { cn } from '@/lib/utils'

interface SwitchProps {
  checked: boolean
  onCheckedChange: (checked: boolean) => void
  label?: string
  description?: string
  disabled?: boolean
  className?: string
}

export function Switch({
  checked,
  onCheckedChange,
  label,
  description,
  disabled,
  className,
}: SwitchProps) {
  if (!label) {
    return (
      <ShadcnSwitch
        checked={checked}
        onCheckedChange={onCheckedChange}
        disabled={disabled}
        className={className}
      />
    )
  }

  return (
    <div className={cn('flex items-center justify-between gap-4', className)}>
      <div className="flex-1 space-y-1">
        <Label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
          {label}
        </Label>
        {description && (
          <p className="text-sm text-muted-foreground">{description}</p>
        )}
      </div>
      <ShadcnSwitch
        checked={checked}
        onCheckedChange={onCheckedChange}
        disabled={disabled}
      />
    </div>
  )
}