import { useRef } from 'react';
import { IProject, Media } from '../../types/IProject';

export function Project({ src, title, tags, media, year }: IProject<Media>) {
  const videoRef = useRef<HTMLVideoElement>(null);

  return (
    <div
      itemProp="project"
      itemScope
      itemType={`https://schema.org/${title}`}
      className="relative flex flex-col aspect-square"
    >
      {media === Media.img ? (
        <div className="flex aspect-[4/3]">
          <img
            className="object-cover object-center w-full pointer-events-none"
            src={src}
            alt={title}
          />
        </div>
      ) : (
        <div className="flex aspect-[4/3]">
          <video
            ref={videoRef}
            src={src}
            muted
            loop
            playsInline
            autoPlay
            className="flex-1 object-cover object-center aspect-[4/3] -mb-px w-fullh-full"
          />
        </div>
      )}
      <div className="flex flex-col justify-between gap-2 my-4">
        <div className="flex justify-between">
          <h4 className="text-xl font-medium">{title}</h4>
          <p className="text-xl font-medium">{year}</p>
        </div>
        <div className="flex gap-2">
          {tags.map(tag => (
            <p key={tag} className="font-medium m-caption text-[#737AA1]">
              {tag}
            </p>
          ))}
        </div>
      </div>
    </div>
  );
}
