portfolio/src/entities/project/ui/ProjectCard/ProjectCard.tsx

import Image from 'next/image';
import { cn } from '$shared/lib';
import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$shared/ui';

type Props = {
  /**
   * Project name
   */
  title: string;
  /**
   * Year the project was completed
   */
  year: string;
  /**
   * Short project description
   */
  description: string;
  /**
   * Technology or category tags
   */
  tags: string[];
  /**
   * Optional preview image URL
   */
  imageUrl?: string;
};

/**
 * Compact project card for grid/list display.
 */
export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
  return (
    <Card
      className={cn(
        'group hover:translate-x-[2px] hover:translate-y-[2px]',
        'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
      )}
    >
      <CardHeader>
        <div className="flex flex-row justify-between items-start mb-3">
          <CardTitle className="flex-1">{title}</CardTitle>
          <span className="brutal-border px-3 py-1 bg-blue text-cream text-sm">{year}</span>
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>

      {imageUrl && (
        <div className="brutal-border my-6 aspect-video bg-blue overflow-hidden relative">
          <Image src={imageUrl} alt={title} fill className="object-cover" />
        </div>
      )}

      <CardContent className="flex flex-wrap gap-2">
        {tags.map((tag) => (
          <span key={tag} className="brutal-border px-3 py-1 bg-cream text-blue text-sm uppercase tracking-wide">
            {tag}
          </span>
        ))}
      </CardContent>

      <CardFooter>
        <Button variant="primary" className="w-full">
          View Project
        </Button>
      </CardFooter>
    </Card>
  );
}