'use client';

import * as React from 'react';
import * as SwitchPrimitive from '@radix-ui/react-switch';
import { clsx } from 'clsx';

export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
  label?: React.ReactNode;
}

export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(
  ({ label, className, id, ...props }, ref) => {
    const generatedId = React.useId();
    const switchId = id ?? (label ? `switch-${generatedId}` : undefined);

    return (
      <label className="inline-flex items-center gap-2 text-sm text-[var(--bl-text-primary)]">
        <SwitchPrimitive.Root
          ref={ref}
          id={switchId}
          className={clsx(
            'relative h-5 w-9 rounded-full border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] transition-colors',
            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bl-accent)]',
            'data-[state=checked]:border-[var(--bl-accent)] data-[state=checked]:bg-[var(--bl-accent)]',
            className
          )}
          {...props}
        >
          <SwitchPrimitive.Thumb
            className={clsx(
              'block h-4 w-4 translate-x-0.5 rounded-full bg-[var(--bl-text-primary)] transition-transform',
              'data-[state=checked]:translate-x-4 data-[state=checked]:bg-[var(--bl-accent-foreground,var(--bl-bg-canvas))]'
            )}
          />
        </SwitchPrimitive.Root>
        {label}
      </label>
    );
  }
);

Switch.displayName = 'Switch';