import Link from 'next/link'
import React from 'react'

import { Media } from '@/components/Media'

type CategoryCardProps = {
  category: {
    id: string | number
    title: string
    slug: string
    description?: string | null
    coverImage?: any | null
  }
  storyCount?: number
  href: string
}

export const CategoryCard: React.FC<CategoryCardProps> = ({ category, storyCount, href }) => {
  return (
    <Link
      href={href}
      className="group block rounded-lg overflow-hidden border border-border bg-card hover:border-primary transition-colors"
    >
      <div className="aspect-[3/2] bg-muted relative overflow-hidden">
        {category.coverImage && typeof category.coverImage !== 'string' ? (
          <Media
            resource={category.coverImage}
            fill
            imgClassName="object-cover group-hover:scale-105 transition-transform duration-300"
          />
        ) : (
          <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center">
            <span className="text-3xl font-bold text-primary/30">{category.title[0]}</span>
          </div>
        )}
      </div>
      <div className="p-4">
        <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-1">
          {category.title}
        </h3>
        {category.description && (
          <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{category.description}</p>
        )}
        {storyCount !== undefined && (
          <p className="text-xs text-muted-foreground mt-2">{storyCount} truyện</p>
        )}
      </div>
    </Link>
  )
}