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 TechnologiesBubbleEffect({ technologies = [], styling, sectionId }: TechnologiesProps) {
  const width = (styling?.width ?? 72) + 24;
  return (
    <Wrapper id={sectionId} styling={styling}>
      <div className='flex flex-row gap-2 lg:gap-5 w-full flex-wrap' style={{ justifyContent: styling?.align }}>
        {technologies.map((tech) => (
          <div
            key={tech}
            className='relative md:p-3 p-2 before:transition-all before:duration-500 before:ease-in-out before:content-[""] before:absolute before:inset-0 before:rounded-full before:opacity-0 hover:before:opacity-100 cursor-pointer before:[box-shadow:var(--box-shadow)] md:w-[var(--tech-icon-width)] w-[64px] sm:w-[76px]'
            style={
              {
                ['--box-shadow' as string]: `inset 0 0 15px ${getColor(styling)}`,
                ['--tech-icon-width' as string]: `${width}px`,
              } as React.CSSProperties
            }
          >
            {TechIcons[tech]}
          </div>
        ))}
      </div>
    </Wrapper>
  );
}
