'use client';

import React, { useState, useEffect } from 'react';

interface LordIconProps {
  src: string;
  trigger?: 'hover' | 'loop' | 'click';
  colors?: string;
  delay?: string;
  style?: React.CSSProperties;
}

export const LordIcon: React.FC<LordIconProps> = ({ src, trigger, colors, delay, style }) => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    // Return a placeholder div with the same dimensions during SSR
    return <div style={style} />;
  }

  return React.createElement('lord-icon', {
    src,
    trigger,
    colors,
    delay,
    style,
  });
};