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

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(--carbon-black)] 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-carbon-black text-ochre-clay text-sm">{year}</span>
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>

      {imageUrl && (
        <div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden">
          <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
        </div>
      )}

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

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