import Image from 'next/image';
import React from 'react';
import { galeryData } from '../lib/data';
import Link from 'next/link';
import { LinkIcon } from 'lucide-react';

const GaleryGridItem = () => {
  return (
    <div>
      <div className="font-bold flex items-center gap-2">
        <span>Галерея</span>
        <div className="w-[25px] h-[4px] bg-gradient-to-r from-primary to-secondary"></div>
      </div>
      <div className="mt-[20px] flex justify-start">
        <div className="grid grid-cols-3 gap-2 justify-start">
          {galeryData.map((item) => (
            <div
              key={item.id}
              className="relative rounded-sm overflow-hidden group"
            >
              <Image
                className="rounded-sm"
                src={item.image}
                alt="footer-image"
                width={70}
                height={70}
              />
              <div className="absolute inset-0 scale-y-0 group-hover:scale-y-100 origin-bottom duration-300 bg-primary/60 flex justify-center items-center">
                <Link href={item.link}>
                  <LinkIcon />
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default GaleryGridItem;
