type BlogBlocksCardProps = {
  category: string;
  title: string;
  description: string;
  date: string;
  authors: string[];
};

export function BlogBlocksCard({ category, title, description, date, authors }: BlogBlocksCardProps) {
  return (
    <article
      data-slot="card"
      className="group relative row-span-5 grid grid-rows-subgrid gap-3 rounded-xl bg-card bg-linear-to-b from-card from-65% to-transparent p-6 text-card-foreground shadow-xl ring-1 shadow-black/6.5 ring-border"
    >
      <time className="text-sm text-muted-foreground">{date}</time>
      <h2 className="text-lg font-semibold text-foreground">{title}</h2>
      <p className="text-muted-foreground">{description}</p>
      <div className="grid grid-cols-[1fr_auto] items-end gap-2 pt-4">
        <div className="space-y-1">
          <span className="text-xs uppercase tracking-wide text-muted-foreground/80">{category}</span>
          <div className="text-sm text-muted-foreground">{authors.join(", ")}</div>
        </div>
        <div className="flex h-6 items-center text-sm font-medium text-primary transition-colors duration-200 group-hover:text-foreground">
          ادامه مطلب
                          </div>
      </div>
    </article>
  );
}