'use client';

import { cn } from '@/lib/admin/utils';

type CustomToggleProps = {
  checked: boolean;
  onChange: (checked: boolean) => void;
};

export function CustomToggle({ checked, onChange }: CustomToggleProps) {
  return (
    <button
      onClick={(event) => { event.preventDefault(); onChange(!checked); }}
      className={cn('w-12 h-6 rounded-full transition-all duration-300 relative flex items-center shrink-0 cursor-pointer overflow-hidden border', checked ? 'bg-violet-500 border-violet-400 shadow-[0_0_15px_rgba(139,92,246,0.4)]' : 'bg-black/50 border-white/10')}
    >
      <div className={cn('w-4 h-4 rounded-full bg-white shadow-sm absolute transition-all duration-300', checked ? 'right-1' : 'left-1')} />
    </button>
  );
}