"use client"

import Link from "next/link"
import { BookOpen } from "lucide-react"
import { CoverImage } from "@/components/cover-image"
import type { GalleryItem } from "@/lib/types"

export function GalleryCard({ item }: { item: GalleryItem }) {
  return (
    <div className="card card-hover group flex overflow-hidden p-0">
      <Link href={`/gallery/${item.gid}`} className="flex flex-1 gap-4">
        <CoverImage
          gid={item.gid}
          alt={item.title}
          className="h-36 w-24 flex-shrink-0"
        />

        <div className="flex flex-1 flex-col gap-1.5 py-3 pr-3">
          <h3 className="line-clamp-2 text-sm font-semibold leading-snug group-hover:text-[var(--accent)] transition-colors">
            {item.title}
          </h3>

          {item.is_spanish && (
            <span className="tag-pill w-fit bg-emerald-900/30 text-emerald-300 border border-emerald-800/40">
              ESP
            </span>
          )}

          <div className="flex items-center gap-3 text-xs text-[var(--muted)]">
            <span>{item.pages} pág</span>
            <span
              className={`capitalize ${
                item.status === "completed"
                  ? "text-[var(--success)]"
                  : item.status === "failed"
                    ? "text-[var(--error)]"
                    : item.status === "processing"
                      ? "text-[var(--accent)]"
                      : "text-[var(--warning)]"
              }`}
            >
              {item.status}
            </span>
          </div>

          <div className="mt-auto flex items-center gap-2">
            <Link
              href={`/gallery/${item.gid}/read`}
              className="btn-primary text-xs py-1 px-2.5"
            >
              <BookOpen className="h-3 w-3" />
              Leer
            </Link>
            {item.status === "failed" && (
              <span className="text-[10px] text-[var(--error)]">{item.error || "error"}</span>
            )}
          </div>
        </div>
      </Link>
    </div>
  )
}