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

import Image from 'next/image';
import { cn } from '$shared/lib';
import { Badge, Button, Card, CardSidebar, 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;
};

/**
 * Project card with sidebar layout.
 * Sidebar: year badge, stack tags, View Project button.
 * Main: title, optional image, description.
 */
export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
  return (
    <Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
      <CardSidebar
        sidebar={
          <div className="flex flex-col gap-4">
            <Badge>{year}</Badge>
            {tags.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {tags.map((tag) => (
                  <Badge key={tag} variant="outline" size="xs">
                    {tag}
                  </Badge>
                ))}
              </div>
            )}
            <Button variant="primary" className="w-full">
              View Project
            </Button>
          </div>
        }
      >
        <div className="flex flex-col gap-4">
          <CardTitle className="font-heading">{title}</CardTitle>
          {imageUrl && (
            <div className="brutal-border aspect-video bg-blue overflow-hidden relative">
              <Image src={imageUrl} alt={title} fill className="object-cover" />
            </div>
          )}
          <p className="opacity-80">{description}</p>
        </div>
      </CardSidebar>
    </Card>
  );
}