"use client";

interface IconProps {
  name: string;
  size?: number;
  filled?: boolean;
  className?: string;
}

/**
 * Material Symbols Rounded icon wrapper.
 * Usage: <Icon name="search" size={20} />
 */
export default function Icon({ name, size = 20, filled, className = "" }: IconProps) {
  return (
    <span
      className={`material-symbols-rounded ${filled ? "filled" : ""} ${className}`}
      style={{ fontSize: size, width: size, height: size, overflow: "hidden", display: "inline-flex", alignItems: "center", justifyContent: "center" }}
    >
      {name}
    </span>
  );
}
