import React from 'react';

import { ProjectInfo } from '@easytwin/core';
import { FileCard } from '@/pages/FileManage/components';

export interface ProjectCardProp {
  dataSource: ProjectInfo;
  footer?: React.ReactNode;
  extendRender?: React.ReactNode;
}

const ProjectCard: React.FC<ProjectCardProp> = function ({ dataSource, footer, extendRender }) {
  return (
    <div key={dataSource.id} className="cursor-pointer h-50 rounded relative">
      <div className="h-full pt-4 bg-[#1F212C] bg-clip-content" />
      <div className="w-full h-40 absolute top-0 z-1 px-4 transition-all px-4">
        <div className="h-full relative group">
          <FileCard
            hoverContent={extendRender}
            value={dataSource.thumb}
            className="!h-full"
            backgroundSize="cover"
          />
        </div>
      </div>
      <div className="h-14 w-full absolute bottom-0 z-10">
        <div className="h-2 relative flex">
          <div className="w-[30%] h-full bg-bgColorBase pt-1.5 flex justify-center items-center">
            <div
              style={{
                width: '60%',
                height: '2px',
                backgroundImage:
                  'linear-gradient(90deg, rgba(255, 255, 255, 0.32) 0.54%, rgba(255, 255, 255, 0.08) 101.17%)',
              }}
            />
          </div>
          <div className="w-4 h-2 border-bgColorBase border-t-4 border-b-4 border-l-8 border-r-8 border-t-transparent border-r-transparent" />
        </div>
        <div className="bg-bgColorBase w-full h-12 px-4 absolute">{footer}</div>
      </div>
    </div>
  );
};

export default ProjectCard;