import { type ComponentPropsWithoutRef } from 'react'
import {
  SvgInformationCircle,
  SvgTickCircle,
  SvgWarningCircle,
  SvgXCircle,
} from '../../icons'
import { cn } from '../../utils'
import { type Variant } from './variants'

interface IconWrapperProps extends ComponentPropsWithoutRef<'img'> {
  variant: Variant
}

const SvgIcon = ({ variant }: IconWrapperProps) => {
  const props = {
    height: 24,
    width: 24,
    className: 'h-6 w-6 shrink-0',
    alt: `${variant || 'info'} icon`,
  }

  if (variant === 'success') {
    return <SvgTickCircle {...props} color="success" />
  }
  if (variant === 'warning') {
    return <SvgWarningCircle {...props} color="warning" />
  }
  if (variant === 'error') {
    return <SvgXCircle {...props} color="error" />
  }
  return <SvgInformationCircle {...props} color="progress" />
}

const Icon = ({ variant = 'info' }: IconWrapperProps) => {
  return (
    <div
      className={cn(
        'm-0 flex h-10 w-10 items-center justify-center rounded group-[.error]:bg-error-muted group-[.info]:bg-progress-muted group-[.success]:bg-success-muted group-[.warning]:bg-warning-muted',
      )}
    >
      <SvgIcon variant={variant} />
    </div>
  )
}

export default Icon