import { forwardRef } from 'react';
import { stands } from '../consts/stands';
import { IStand } from '../types/IStand';
import { SliderWithScaling } from './ui/SliderWithScaling';
import { Title } from './ui/Title';
import { useWindowWidth } from '../hooks/useWindowWidth';

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

  return (
    <div className="pt-12 space-y-10 lg:space-y-20 lg:pt-16">
      <Title>
        Мы разработчики с собственной
        <span className="text-gradient">
          {' '}
          производственной базой, опытной инженерной лабораторией,{' '}
        </span>
        командой разработчиков программного обеспечения и графики
      </Title>
      <SliderWithScaling
        slides={stands}
        SlideElement={Stand}
        className="pb-40 space-y-8 sm:max-lg:pb-10 max-sm:pb-20"
        slideSizes={
          width >= 1024
            ? ['31.6vw', '31.8vw', '48vw', '48vw']
            : width >= 640
              ? ['93.75vw', '93.75vw', '93.75vw', '93.75vw']
              : ['91.11vw', '91.11vw', '91.11vw', '91.11vw']
        }
        childClassName="flex flex-col justify-stretch h-full"
        controlsPosition={'bottom'}
      />
    </div>
  );
}

const Stand = forwardRef<HTMLDivElement, IStand>(
  ({ annotation, img, title, year }, ref) => {
    return (
      <div ref={ref} className="flex flex-col h-full gap-y-4">
        <img
          src={img}
          alt={title}
          className="object-cover min-h-[31.6vw] flex-1 aspect-[507/431] object-center"
        />
        <div className="flex justify-between">
          <div className="space-y-2">
            <p className="font-medium h4">{title}</p>
            <div className="flex items-center gap-x-2">
              <div className="w-2 h-2 bg-[#737AA1]" />
              <p className="text-xs text-[#737AA1] font-medium">{annotation}</p>
            </div>
          </div>
          <p className="font-medium h4">{year}</p>
        </div>
      </div>
    );
  },
);
