import cn from '@/lib/merge-clsx';
import styles from './styles.module.css';

export interface IconProps extends React.HTMLAttributes<HTMLElement> {
  name:
    | 'global'
    | 'facebook'
    | 'instagram'
    | 'x'
    | 'tiktok'
    | 'close'
    | 'linkedin'
    | 'menu'
    | 'search'
    | 'youtube'
    | 'chat'
    | 'up-arrow'
    | 'down-arrow'
    | 'left-arrow'
    | 'right-arrow'
    | 'phone'
    | 'email'
    | 'scroll'
    | 'location'
    | 'play'
    | 'long-left-arrow'
    | 'long-right-arrow'
    | 'chevron-down'
    | 'chevron-up'
    | 'small-right-arrow'
    | 'calendar'
    | 'book'
    | 'tick'
    | 'form'
    | 'tower'
    | 'area'
    | 'office'
    | 'email-light'
    | 'location-pin'
    | 'phone-light'
    | 'residence'
    | 'store'
    | 'download'
    | 'forward-arrow'
    | 'basement';
}
const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
  const classNames = cn(styles.icon, {
    [styles[`icon-${name}`]]: styles[`icon-${name}`],
    [className as string]: className
  });

  return <i className={classNames} {...props}></i>;
};

export default Icon;
