"use client";
import Link from "next/link";

interface StaticTileProps {
  id: number;
  title: string;
  subtitle: string | React.ReactNode;
  image: string;
  buttonText: string;
  // link: string;
}

export default function Page({
  title,
  subtitle,
  image,
  buttonText,
}: // link,
StaticTileProps) {
  return (
    <div className="group border border-border shadow-sm  overflow-hidden hover:shadow-[0_6px_16px_rgba(0,0,0,0.15)] transition-shadow duration-300 bg-card">
      {/* Image */}
      <Link href="" rel="noopener noreferrer">
        <img
          src={image}
          alt={title}
          className="w-full h-72 object-cover transition-transform duration-300 "
        />
      </Link>

      {/* Body */}
      <div className="p-4">
        <h3 className=" text-lg text-foreground mb-2">{title}</h3>
        <p className="text-sm font-light text-muted-foreground">{subtitle}</p>
      </div>

      {/* Footer Button */}
      <div className="p-4 pt-0">
        <Link
          href=""
          // target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center text-primary font-medium"
        >
          {buttonText}
        </Link>
      </div>
    </div>
  );
}