type IconProps = {
  className?: string;
  size?: number;
};

type MaterialIconProps = IconProps & {
  name: string;
};

export function MaterialIcon({ name, className, size = 20 }: MaterialIconProps) {
  return (
    <span
      className={`material-symbols-outlined ${className ?? ""}`}
      style={{
        fontSize: size,
        fontFamily: '"Material Symbols Outlined"',
        fontVariationSettings: '"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24',
      }}
      aria-hidden
    >
      {name}
    </span>
  );
}

export function NavIcon({
  name,
  className,
}: {
  name: string;
  className?: string;
}) {
  return <MaterialIcon name={name} className={className} size={20} />;
}

export function IconChevronDown({ className }: IconProps) {
  return <MaterialIcon name="expand_more" className={className} size={20} />;
}

export function IconMenu({ className }: IconProps) {
  return <MaterialIcon name="menu" className={className} size={24} />;
}

export function IconLogout({ className }: IconProps) {
  return <MaterialIcon name="logout" className={className} size={16} />;
}