import { clsx } from 'clsx';
import React from 'react';

import ImageWithFallback from '@/components/image/ImageWithFallback';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import Switch from '@/components/switch/Switch';
import { Tooltip } from '@/components/tooltip/Tooltip';
import { InfoIcon } from '@/icons';

export const LabelWithSwitch = ({
  label,
  secondaryLabel,
  checked,
  onChange,
  icon,
  image,
  className,
  tooltipText,
  isLoading,
  disabled,
}: {
  label: string;
  secondaryLabel?: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
  icon?: React.ElementType;
  image?: string;
  className?: string;
  tooltipText?: string;
  isLoading?: boolean;
  disabled?: boolean;
}) => {
  return (
    <div
      className={clsx(
        'flex items-center justify-between rounded-md border border-border-primary p-3',
        {
          'cursor-not-allowed opacity-60': disabled,
        },
        className
      )}
    >
      <div className='flex items-center'>
        <div className='mr-2 flex items-center'>
          {image ? (
            <ImageWithFallback
              src={image}
              alt=''
              className={'h-8 w-6 rounded object-cover'}
            />
          ) : icon ? (
            React.createElement(icon)
          ) : null}
        </div>
        <div className='flex flex-col'>
          <div className='flex flex-row items-center gap-2'>
            {label}
            {tooltipText && (
              <Tooltip label={tooltipText} placement='top'>
                <InfoIcon className='h-4 w-4' />
              </Tooltip>
            )}
          </div>
          {secondaryLabel && (
            <span className='text-sm text-foreground-secondary/50'>
              {secondaryLabel}
            </span>
          )}
        </div>
      </div>
      {isLoading ? (
        <SpinnerSVG />
      ) : (
        <Switch
          checked={checked}
          onChange={disabled ? () => {} : onChange}
          disabled={disabled}
        />
      )}
    </div>
  );
};

export default LabelWithSwitch;