src/components/about-card.tsx

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={""}>
      <CardBody className="h-[900px] p-5 flex flex-col justify-center items-center rounded-2xl bg-gray-900 " placeholder={""}>
        {/* <img src={imageName} alt="next/image" className="w-512 h-512 mb-2"/> */}
        <Typography variant="h4" className="text-center" color="white" placeholder="">

          {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="">

          {subTitle}
        </Typography>

        <Typography
        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={""}>
            <Typography placeholder={""} color="blue-gray" className="m-0 mb-0 text-base w-full lg:w-6/6 text-center font-normal">
              More Details
            </Typography>
          </Button>
        </a>

      </CardBody>
    </Card>
  );
}

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

export default AboutCard;