import Link from "next/link";
import { Mic2 } from "lucide-react";
import { Card } from "@/components/ui/card";
import { EpisodeStatusBadge } from "./episode-status-badge";

export interface EpisodeCardData {
  id: string;
  title: string;
  status: string;
  format: string;
  language: string;
  createdAt: Date;
  coverArtKey?: string | null;
}

export function EpisodeCard({ episode }: { episode: EpisodeCardData }) {
  return (
    <Link href={`/episodes/${episode.id}`}>
      <Card className="group overflow-hidden transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
        <div className="relative aspect-square bg-muted">
          {episode.coverArtKey ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={`/api/assets/${episode.coverArtKey}`}
              alt={episode.title}
              className="h-full w-full object-cover"
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center text-muted-foreground">
              <Mic2 className="h-10 w-10" />
            </div>
          )}
          <div className="absolute left-2 top-2">
            <EpisodeStatusBadge status={episode.status} />
          </div>
        </div>
        <div className="p-3">
          <p className="truncate font-medium">{episode.title}</p>
          <p className="mt-0.5 text-xs text-muted-foreground">
            {episode.format.replace("_", "-").toLowerCase()} · {episode.language.toUpperCase()} ·{" "}
            {episode.createdAt.toLocaleDateString()}
          </p>
        </div>
      </Card>
    </Link>
  );
}