import { Icon as IconifyIcon } from '@iconify/react';

import colors from '../Colors';
import { styled } from '../Theme';
import { withDeprecated } from '../Util/deprecate';

export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
  name: string;
  color?: string;
  size?: number;
  variant?: 'light' | 'regular' | 'solid';
  rounded?: false | true;
  forwardedRef?: React.Ref<unknown>;
}

// eslint-disable-next-line react/prop-types
function Icon({
  name,
  color = colors.grey[900],
  size = 24,
  variant = 'regular',
  rounded = false,
  className = '',
  forwardedRef = undefined,
}: IconProps) {
  const iconName = variant === 'solid' ? `fa-solid:${name}` : `fa-regular:${name}`;
  const content = <IconifyIcon icon={iconName} color={color} width={size} height={size} className={className} />;
  if (rounded) {
    return (
      <Span ref={forwardedRef as React.Ref<HTMLSpanElement>} size={size} color={color} className={className}>
        {content}
      </Span>
    );
  }
  return content;
}

const Span = styled('span')<{ size: number; color: string }>`
  width: ${(props) => props.size * 2}px;
  height: ${(props) => props.size * 2}px;
  border-radius: 50%;
  border: 1px solid ${(props) => props.color};
  display: flex;
  justify-content: center;
  align-items: center;

  .fa,
  .fas,
  .fal,
  .far {
    line-height: ${(props) => props.size}px;
  }
`;

export default withDeprecated(
  ({
    ref,
    ...props
  }: IconProps & {
    ref?: React.Ref<unknown>;
  }) => <Icon {...props} forwardedRef={ref} />,
  { name: 'Icon', alternative: 'SVG icons' }
);
