import Wrapper from '@/components/common/Wrapper';
import { TechIcons } from '@/components/icons/TechIcons';
import { TechnologiesProps } from '@/src/types/technology';
import { getColor } from '@/src/utils/color';

export function TechnologiesIconsWithNames({ technologies = [], styling, sectionId }: TechnologiesProps) {
  const color = getColor(styling);
  const width = styling?.width || 48;

  return (
    <Wrapper id={sectionId} styling={styling}>
      <div
        className='flex flex-row text-md font-bold gap-2 lg:gap-5 w-full flex-wrap'
        style={{ justifyContent: styling?.align }}
      >
        {technologies.map((tech) => (
          <div
            key={tech}
            className='relative transition-all duration-500 ease-in-out hover:scale-110 cursor-pointer border-2 border-dark flex flex-row items-center rounded-sm gap-2 p-4 text-md md:text-[length:var(--font-size)]'
            style={{
              '--font-size': `${Math.max(14, Math.min(width - 24, 32))}px`,
            } as React.CSSProperties}
          >
            <span
              className='md:w-[var(--tech-icon-width)] w-[32px] sm:w-[48px]'
              style={{
                color: color,
                '--tech-icon-width': `${width}px`,
              } as React.CSSProperties}
            >
              {TechIcons[tech]}
            </span>
            <span>{tech}</span>
          </div>
        ))}
      </div>
    </Wrapper>
  );
}
