import { useEffect, useRef } from 'react';
import { interactions } from '../consts/interactions';
import { Title } from './ui/Title';
import { useInView } from 'framer-motion';

export function Interactions() {
  return (
    <div className="items-start pt-12 lg:pt-16 max-sm:space-y-8 lg:flex sm:max-lg:space-y-10 gap-x-4">
      <Title className="lg:sticky top-20 max-lg:hidden max-w-[50vw]">
        С помощью интерактивных инструментов создаем систему{' '}
        <span className="text-gradient">
          эффективного взаимодействия с&nbsp;клиентами
        </span>
      </Title>
      <Title className="lg:hidden">
        Создаем систему для
        <span className="text-gradient">
          {' '}
          эффективного взаимодействия с&nbsp;клиентами
        </span>{' '}
        с&nbsp;помощью интерактивных инструментов и&nbsp;анализа
        пользовательского опыта
      </Title>
      <div className="space-y-4">
        {interactions.map(interaction => (
          <Interaction key={interaction.title} {...interaction} />
        ))}
      </div>
    </div>
  );
}

function Interaction({ title, video }: { title: string; video: string }) {
  const videoRef = useRef<HTMLVideoElement>(null);

  const inView = useInView(videoRef, { amount: 'all' });

  useEffect(() => {
    if (!videoRef.current) return;
    if (inView) videoRef.current.play();
    else videoRef.current.pause();
  }, [inView]);

  return (
    <div className="sm:p-8 p-3 border border-[#3D425C] bg-[#14161F] overflow-clip space-y-4">
      <p className="font-medium leading-none text-[clamp(20px,20px+(100vw-360px)/1240*12,32px)]">
        {title}
      </p>
      <video
        ref={videoRef}
        src={video}
        muted
        autoPlay
        loop
        playsInline
        className="-mb-3 sm:-mb-8"
      />
    </div>
  );
}
