import { SliderWithScaling } from '../../ui/SliderWithScaling';
import { Title } from '../../ui/Title';
import { projects } from '../../consts/projects';
import { Project } from './Project';
import { useWindowWidth } from '../../hooks/useWindowWidth';

export function Projects() {
  const width = useWindowWidth();

  return (
    <div
      id="projects"
      itemScope
      itemType="https://schema.org/Projects"
      className="lg:space-y-14 space-y-6 lg:pt-[100px] max-lg:py-16"
    >
      <Title className="lg:w-4/5">
        <span className="text-gradient">Большой опыт в работе</span>{' '}
        с&nbsp;промышленными предприятиями и&nbsp;учебными заведениями
      </Title>
      <SliderWithScaling
        slides={projects}
        SlideElement={Project}
        slideSizes={
          width >= 1024
            ? ['31.69vw', '31.56vw', '40vw', '40vw']
            : width >= 640
              ? ['66.01vw', '66vw', '93.75vw', '93.75vw']
              : ['91.11vw', '91.11vw', '91.11vw', '91.11vw']
        }
        className="pb-10 max-sm:pb-12"
        childClassName="flex flex-col justify-stretch h-full"
        controlsPosition={'bottom'}
      />
    </div>
  );
}
