import Link from "next/link";
import { ReactNode } from "react";

export type DashTileItem = {
  href: string;
  title: string;
  titleEn: string;
  description: string;
  icon: ReactNode;
};

type DashTileGridProps = {
  tiles: DashTileItem[];
  startDelayMs?: number;
  stepMs?: number;
};

export default function DashTileGrid({
  tiles,
  startDelayMs = 80,
  stepMs = 70,
}: DashTileGridProps) {
  return (
    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-5">
      {tiles.map((tile, i) => (
        <Link
          key={tile.href + tile.titleEn}
          href={tile.href}
          className="dash-tile dash-enter"
          style={{ animationDelay: `${startDelayMs + i * stepMs}ms` }}
        >
          <span className="mx-auto flex text-muted/65">{tile.icon}</span>
          <div className="mt-5 text-center">
            <h2 className="text-lg leading-tight text-ink">{tile.title}</h2>
            <p
              dir="ltr"
              className="mt-0.5 font-display text-[0.7rem] tracking-[0.08em] text-muted"
            >
              {tile.titleEn}
            </p>
            <p className="mt-3 whitespace-nowrap text-xs leading-6 text-muted">
              {tile.description}
            </p>
          </div>
          <span className="mt-5 text-center text-xs tracking-wide text-muted">
            مشاهده
            <span aria-hidden className="mx-1">
              ←
            </span>
          </span>
        </Link>
      ))}
    </div>
  );
}