import { cn } from '$shared/lib';
import { Badge, Button, Card, CardSidebar, CardTitle, ImageLightbox, RichText } from '$shared/ui';

export interface Props {
  /**
   * Project name
   */
  title: string;
  /**
   * Year the project was completed
   */
  year: string;
  /**
   * Short project description
   */
  description: string;
  /**
   * Technology or category tags
   */
  tags: string[];
  /**
   * Project's URL
   */
  url: string;
  /**
   * Optional preview image URL
   */
  imageUrl?: string;
  /**
   * Skip lazy-loading the preview image. Set true for above-the-fold cards
   * (typically the first card in the list) to improve LCP.
   * @default false
   */
  priority?: boolean;
}

/**
 * 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, url, imageUrl, priority = false }: Props) {
  return (
    <Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
      <CardSidebar
        sidebar={
          <div className="flex flex-col gap-4">
            <p className="text-sm font-medium brutal-border-left pl-3">{year}</p>
            {tags.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {tags.map((tag) => (
                  <Badge key={tag} variant="outline" size="xs">
                    {tag}
                  </Badge>
                ))}
              </div>
            )}
            <Button href={url} variant="primary" size="sm" className="self-start lg:w-full lg:self-auto text-center">
              View Project
            </Button>
          </div>
        }
      >
        <div className="flex flex-col gap-4">
          <CardTitle className="font-heading">{title}</CardTitle>
          {imageUrl && (
            <ImageLightbox src={imageUrl} alt={title} priority={priority} className="brutal-border bg-blue" />
          )}
          <RichText html={description} />
        </div>
      </CardSidebar>
    </Card>
  );
}