import Image from 'next/image';
import { Props } from './types';
import { StyledButton, StyledLink } from './styles';

const IconButton = ({
  alt,
  icon,
  href,
  target,
  onClick,
  className,
  width = 24,
  height = 24,
}: Props) =>
  href ? (
    <StyledLink
      href={href}
      target={target}
      onClick={onClick}
      className={className}
    >
      <Image alt={alt} src={icon} width={width} height={height} />
    </StyledLink>
  ) : (
    <StyledButton onClick={onClick} className={className}>
      <Image alt={alt} src={icon} width={width} height={height} />
    </StyledButton>
  );

export default IconButton;