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

export const Project = forwardRef<HTMLDivElement, IProject<Media>>(
  ({ src, title, tags, media, year }, ref) => {
    const [buffering, setBuffering] = useState(true);

    return (
      <div
        itemProp="project"
        itemScope
        itemType={`https://schema.org/${title}`}
        ref={ref}
        className="relative flex flex-col aspect-square"
      >
        {media === Media.img ? (
          <div
            className="flex-1 bg-center bg-no-repeat bg-cover"
            style={{ backgroundImage: `url(${src})` }}
          />
        ) : (
          <div
            className="relative flex-1 overflow-hidden bg-center bg-no-repeat bg-cover"
            style={{ backgroundImage: `url(${src[1]})` }}
          >
            <video
              src={src[0]}
              muted
              loop
              autoPlay
              className="object-cover object-center w-full h-full -mb-px"
              onPlaying={() => setBuffering(false)}
              onWaiting={() => setBuffering(true)}
            />
            {buffering && <div className="absolute" />}
          </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>
    );
  },
);

Project.displayName = 'Project';