Gallery #3

import Image from "next/image"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import type { ImageType, LinkType } from "@/types"

interface Props {
  badge?: string
  title: string
  description: string
  items: {
    title: string
    description: string
    image: ImageType
    category?: string
    link: LinkType
  }[]
}

export default function Gallery3({ badge, title, description, items }: Props) {
  return (
    <div className="w-full py-20 lg:py-40">
      <div className="container mx-auto">
        <div className="flex flex-col gap-10">
          <div className="flex gap-4 flex-col items-start">
            {badge && <Badge>{badge}</Badge>}
            <div className="flex gap-2 flex-col">
              <h2 className="text-3xl md:text-5xl tracking-tighter max-w-xl font-semibold text-left">
                {title}
              </h2>
              <p className="text-lg max-w-xl lg:max-w-lg leading-relaxed tracking-tight text-muted-foreground text-left">
                {description}
              </p>
            </div>
          </div>

          <div className="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
            {items.map((item, index) => (
              <Link
                key={index}
                href={item.link.href}
                className="relative group flex"
              >
                <Card className="break-inside-avoidoverflow-hidden rounded-lg transition-all duration-300 hover:shadow-lg">
                  <div className="relative aspect-[4/3] overflow-hidden">
                    {item.image && (
                      <Image
                        src={item.image.src}
                        alt={item.image.alt}
                        fill
                        className="object-cover transition-transform duration-300 group-hover:scale-105 h-full w-full"
                      />
                    )}
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                  </div>
                  <CardContent className="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-0 group-hover:-translate-y-1 transition-transform duration-300">
                    {item.category && (
                      <Badge variant="secondary" className="mb-2">
                        {item.category}
                      </Badge>
                    )}
                    <div className="flex items-start gap-3">
                      <div>
                        <h3 className="text-xl font-semibold mb-1">
                          {item.title}
                        </h3>
                        <p className="text-sm text-gray-300">
                          {item.description}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}