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

export function TechnologiesGlowingCards({ technologies = [], styling, sectionId }: TechnologiesProps) {
  const width = styling?.width || 48;
  return (
    <Wrapper id={sectionId} styling={styling}>
      <div className='flex flex-row flex-wrap gap-2 lg:gap-4' style={{ justifyContent: styling?.align }}>
        {technologies.map((tech) => (
          <TechnologyCard
            key={tech}
            logo={<div className={`md:w-[var(--tech-icon-width)] w-[32px] sm:w-[48px]`} style={{ '--tech-icon-width': `${width}px` } as React.CSSProperties}>{TechIcons[tech]}</div>}
            name={tech}
            color={getColor(styling)}
          />
        ))}
      </div>
    </Wrapper>
  );
}
