import {
  Card,
  CardBody,
  Typography,
  Button,
} from "@material-tailwind/react";

import Image from 'next/image'

interface AboutCardProp {
  title: string;
  subTitle: string;
  description: string;
  imageName: string;
  paper_links: string;
}

export function AboutCard({ title, description, subTitle,imageName,paper_links }: AboutCardProp) {
  return (
    <Card
      shadow={false}
      placeholder={""}
      onPointerEnterCapture={() => {}}
      onPointerLeaveCapture={() => {}}
    >
      <CardBody
        className="h-[900px] p-5 flex flex-col justify-center items-center rounded-2xl bg-gray-900 "
        placeholder={""}
        onPointerEnterCapture={() => {}}
        onPointerLeaveCapture={() => {}}
      >
        {/* <img src={imageName} alt="next/image" className="w-512 h-512 mb-2"/> */}
        <Typography
          variant="h4"
          className="text-center"
          color="white"
          placeholder=""
          onPointerEnterCapture={() => {}}
          onPointerLeaveCapture={() => {}}
        >

          {title}
        
        </Typography>
        {isVideo(imageName) ? (
            <video width="500" height="500" controls>
              <source src={`/paper_image/${imageName}`} type="video/mp4" />
              Your browser does not support the video tag.
            </video>
          ) : (
            <Image
              src={`/paper_image/${imageName}`}
              width={500}
              height={500}
              alt="next/image"
            />
          )}

        {/* <Image
        src={`/paper_image/${imageName}`}
        width={500}
        height={500}
        alt="next/image"
        
      /> */}
        <Typography variant="h6" className="mb-4 text-center" color="white" placeholder="" 
        onPointerEnterCapture={undefined}
        onPointerLeaveCapture={undefined}
        >

          {subTitle}
        </Typography>

        <Typography
        onPointerEnterCapture={undefined}
        onPointerLeaveCapture={undefined}
        variant="lead"
        placeholder={""}
          color="white"
          className="mt-2 mb-10 text-base w-full lg:w-10/12 text font-normal"
        >
          {description}          
        </Typography>
        <a href={paper_links} target="_blank">
          <Button
            color="white"
            placeholder={""}
            onPointerEnterCapture={() => {}}
            onPointerLeaveCapture={() => {}}
          >
            <Typography
              placeholder={""}
              color="blue-gray"
              className="m-0 mb-0 text-base w-full lg:w-6/6 text-center font-normal"
              onPointerEnterCapture={() => {}}
              onPointerLeaveCapture={() => {}}
            >
              More Details
            </Typography>
          </Button>
        </a>

      </CardBody>
    </Card>
  );
}

function isVideo(filename: string) {
  return ['.mp4', '.webm', '.ogg'].some(extension => filename.endsWith(extension));
}

export default AboutCard;