'use client';
import { useEffect, useState } from 'react';

const SvgIcon = ({ name, ...props }) => {
  const [Icon, setIcon] = useState(null);

  useEffect(() => {
    let isMounted = true;

    import(`@/assets/svg-icon/${name}.svg`)
      .then((module) => {
        if (isMounted) {
          setIcon(() => module.default);
        }
      })
      .catch(() => {
        if (isMounted) {
          setIcon(null);
        }
      });

    return () => {
      isMounted = false;
    };
  }, [name]);

  if (!Icon) {
    return null;
  }

  return <Icon {...props} />;
};

export default SvgIcon;