import { Link } from "wouter";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import type { Work } from "@shared/schema";

interface SimpleWorkCardProps {
  work: Work;
  grid?: boolean;
  className?: string;
}

/**
 * Presentation component for a single work in list or grid layout.
 * Keeps logic minimal; parent supplies fully shaped Work object.
 */
export function SimpleWorkCard({
  work,
  grid = false,
  className,
}: SimpleWorkCardProps) {
  return (
    <Link href={`/works/${work.slug}`}>
      <Card
        className={`group bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow ${
          grid ? "h-full flex flex-col" : ""
        } ${className || ""}`}
      >
        <CardContent className={grid ? "p-4 flex flex-col h-full" : "p-4"}>
          <div className={grid ? "mb-3" : "mb-2"}>
            <h3 className="font-serif text-lg font-semibold mb-1 group-hover:text-russet dark:group-hover:text-russet/90 transition-colors">
              {work.title}
            </h3>
            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-navy/70 dark:text-cream/70">
              {work.type && <span className="capitalize">{work.type}</span>}
              {work.year && <span>{work.year}</span>}
              {work.language && (
                <span className="capitalize">{work.language}</span>
              )}
            </div>
          </div>

          {work.description && (
            <p
              className={`text-navy/80 dark:text-cream/80 text-sm ${
                grid ? "line-clamp-3 flex-1 mb-3" : "line-clamp-2 mb-2"
              }`}
            >
              {work.description}
            </p>
          )}

          {work.tags && work.tags.length > 0 && (
            <div className="flex flex-wrap gap-2">
              {work.tags.slice(0, 3).map((tagId) => (
                <Badge
                  key={tagId}
                  variant="outline"
                  className="bg-navy/10 dark:bg-navy/20 text-navy/70 dark:text-cream/70 text-xs border-none"
                >
                  {tagId}
                </Badge>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </Link>
  );
}
