import React, { FC } from "react";
import styled from "styled-components";
import { Colors } from "../../untils/Theme";

interface IIConWrapperProps {
  small?: boolean;
  color?: string;
}
const IconWrapper = styled.div<IIConWrapperProps>`
  cursor: pointer;
  display: flex;
  justify-content: center;
  .material-symbols-outlined {
    font-size: ${(p) => (p.small ? "2.4rem" : "4.2rem")};
    line-height: ${(p) => (p.small ? "2.4rem" : "4.2rem")};
    color: ${(p) => (p.color ? p.color : Colors.white)};
    font-weight: normal;
    &:hover {
      color: ${Colors.seaBlue};
    }
    ::selection {
      background: transparent;
    }
  }
`;
interface IIconProps {
  name: string;
  small?: boolean;
  color?: string;
  onClick?: any;
}

export const Icon: FC<IIconProps> = ({
  name,
  small,
  onClick,
  color,
}: IIconProps) => {
  return (
    <IconWrapper small={small} onClick={onClick && onClick} color={color}>
      <span className="material-symbols-outlined">{name}</span>
    </IconWrapper>
  );
};