"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 }}
    >
      {name}
    </span>
  );
}