import Link from 'next/link';

export function Overview({
  stats,
}: {
  stats: { count: number; title: string; url: string }[];
}) {
  return (
    <div className="">
      <div className="leading-none font-semibold">Overview</div>
      <div className="flex justify-between space-x-4 text-center mt-5 px-3">
        {stats.map((o, i) => (
        <Link
          href={o.url}
          key={'overview_' + o.title + i}
          className="inline-flex flex-col items-center w-auto no-decoration bg-transparent text-gray-800 hover:text-primary"
        >
          <div
          className={
            'text-primary! hover:text-primary!' +
            'text-2xl lg:text-2xl font-bold text-center flex ' +
            'items-center justify-center content-center'
          }
          >{o.count}</div>
          <div className="text-xs font-medium text-inherit mt-2 transition-colors duration-300">{o.title}</div>
        </Link>
        ))}
      </div>
    </div>
  );
}