'use client';

import React from 'react';

interface FaIconProps {
  name: string; // e.g. "fa-bullseye", "fa-tower-broadcast", "fa-layer-group", "fa-brands fa-facebook", etc.
  className?: string;
  style?: React.CSSProperties;
}

export function FaIcon({ name, className = '', style }: FaIconProps) {
  // If name already contains prefix like fa-solid, fa-brands, fa-regular, fa, use directly
  // Otherwise default to fa-solid fa-[name]
  let classNames = '';
  if (name.startsWith('fa-') || name.startsWith('fa ')) {
    if (!name.includes('fa-solid') && !name.includes('fa-brands') && !name.includes('fa-regular') && !name.startsWith('fa ')) {
      classNames = `fa-solid ${name}`;
    } else {
      classNames = name;
    }
  } else {
    classNames = `fa-solid fa-${name}`;
  }

  return <i className={`${classNames} ${className}`} style={style} aria-hidden="true" />;
}

export default FaIcon;