src/components/base/Switch/index.tsx

'use client';

import { cn } from '@/utils/Helpers';
import * as React from 'react';

type SwitchProps = {
  onCheckedChange?: (checked: boolean) => void;
} & React.InputHTMLAttributes<HTMLInputElement>;

const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(({ className, onCheckedChange, ...props }, ref) => {
  return (
    <label className="relative inline-flex cursor-pointer items-center">
      <input
        type="checkbox"
        className="peer sr-only"
        ref={ref}
        onChange={e => onCheckedChange?.(e.target.checked)}
        {...props}
      />
      <div
        className={cn(
          'relative h-6 w-11 rounded-full bg-muted transition-colors peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-checked:bg-primary',
          className,
        )}
      >
        <div className="absolute left-[2px] top-[2px] size-5 rounded-full bg-white transition-transform peer-checked:translate-x-5" />
      </div>
    </label>
  );
});
Switch.displayName = 'Switch';

export { Switch };