import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { BookOpen } from "lucide-react";
import Image from "next/image";
import { Badge } from "../../ui/badge";
import Link from "next/link";
import { buttonVariants } from "../../ui/button";
import { Book } from "@/lib/schemas/books";
import { getPublicUrl } from "@/lib/utils/storage";

type ResourceCardProps = {
  book: Book;
};

export default function ResourceCard({ book }: ResourceCardProps) {
  const thumbnailSrc = getPublicUrl(book.coverImage || "");

  return (
    <Card className="h-full flex flex-col transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 cursor-pointer overflow-hidden group pt-0">
      <div className="relative w-full h-48 mt-0 pt-0 overflow-hidden bg-muted">
        <Image
          src={thumbnailSrc}
          alt={book.title}
          fill
          className="object-cover transition-transform duration-300 group-hover:scale-105"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
      </div>
      <CardHeader>
        <div className="flex items-center justify-between gap-2">
          <Badge variant="secondary" className="bg-muted-foreground px-2 py-0.5 rounded-full text-accent">
            {book.category}
          </Badge>
          <span className="text-xs text-muted-foreground flex items-center gap-1">
            <BookOpen className="w-3 h-3" />
            {book.pages}p
          </span>
        </div>
        <CardTitle className="text-base leading-snug line-clamp-2 mt-2">
          {book.title}
        </CardTitle>
        <CardDescription className="text-xs">
          by {book.author}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex-1">
        <p className="text-xs text-muted-foreground leading-relaxed line-clamp-3">
          {book.description}
        </p>
        <Link href={`/books/${book.id}`} className={buttonVariants({ className: "w-full mt-4" })}>Read More</Link>
      </CardContent>
    </Card>
  );
}