import { projects } from '../consts/projects';
import { IProject } from '../types/IProject';
import { Title } from './ui/Title';

export function Projects() {
  return (
    <div
      id="projects"
      className="space-y-10 scroll-m-14 lg:scroll-m-20 sm:space-y-6"
    >
      <Title>Проекты</Title>
      <div className="flex-col max-sm:space-y-8 lg:flex gap-y-16 sm:max-lg:space-y-10">
        <div className="max-sm:space-y-8 lg:flex sm:max-lg:space-y-10 gap-x-4">
          {projects.slice(0, 2).map(project => (
            <Project {...project} key={project.title} />
          ))}
        </div>
        <Project {...projects[2]} className="lg:max-w-[82vw] self-end" />
        <div className="max-sm:space-y-8 lg:flex sm:max-lg:space-y-10 gap-x-4">
          {projects.slice(3).map(project => (
            <Project {...project} key={project.title} />
          ))}
        </div>
      </div>
    </div>
  );
}

function Project({
  img,
  title,
  tags,
  className,
}: IProject & { className?: string }) {
  return (
    <div className={'space-y-6 ' + className}>
      <img src={img} alt={title} className="object-cover" />
      <div className="space-y-2">
        <h3 className="font-medium h3">{title}</h3>
        <div className="flex gap-x-6">
          {tags.map(tag => (
            <div key={tag} className="flex items-center py-2 gap-x-2">
              <div className="w-[10px] h-[10px] bg-[#52587A]" />
              <p className="font-medium caption text-[#737AA1]">{tag}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
