import Image from "next/image";

import { studentWork } from "@/entities/site-content";

export function StudentWorkCard({ work }: { work: (typeof studentWork)[number] }) {
  return (
    <article className="overflow-hidden border-2 border-foreground bg-card">
      <div className="relative h-56 border-b-2 border-foreground">
        <Image src={work.image} alt={work.title} fill className="object-cover" sizes="(min-width: 768px) 33vw, 100vw" />
      </div>
      <div className="p-5">
        <div className="text-sm font-black uppercase text-primary">{work.role}</div>
        <h3 className="mt-3 text-3xl font-black uppercase leading-none">{work.title}</h3>
        <div className="mt-5 border-t-2 border-foreground pt-4 text-xl font-black">{work.result}</div>
      </div>
    </article>
  );
}