import React, { useRef } from 'react';
import { motion } from 'framer-motion';
import { Card, CardBody, CardHeader, CardFooter } from '@nextui-org/card'; // Adjust the import path as necessary
import { Button, Divider } from '@nextui-org/react'; //

const cardContent = [
  {
    title: 'Card 1 Title',
    body: 'This is the content for card 1.',
    footer: 'Footer for card 1',
  },
  {
    title: 'Card 2 Title',
    body: 'This is the content for card 2.',
    footer: 'Footer for card 2',
  },
  {
    title: 'Card 3 Title',
    body: 'This is the content for card 3.',
    footer: 'Footer for card 3',
  },
  {
    title: 'Card 4 Title',
    body: 'This is the content for card 4.',
    footer: 'Footer for card 4',
  },
  {
    title: 'Card 5 Title',
    body: 'This is the content for card 5.',
    footer: 'JOIN THE DISCORD!!!',
  },  {
    title: 'Card 6 Title',
    body: 'Join the discord for updates!!!',
    footer: 'JOIN THE DISCORD!!!',
  },
  {
    title: 'Card 7 Title',
    body: 'Join the discord for updates!!!',
    footer: 'JOIN THE DISCORD!!!',
  },
  
  // Add more card content objects as needed
];

const CardCarousel: React.FC = () => {
  const carouselRef = useRef<HTMLDivElement>(null);

  const scrollLeft = () => {
    if (carouselRef.current) {
      carouselRef.current.scrollBy({
        left: -carouselRef.current.offsetWidth,
        behavior: 'smooth',
      });
    }
  };

  const scrollRight = () => {
    if (carouselRef.current) {
      carouselRef.current.scrollBy({
        left: carouselRef.current.offsetWidth,
        behavior: 'smooth',
      });
    }
  };

  return (
    <div className="flex flex-col items-center">
      <div className="overflow-hidden relative w-full max-w-4xl">
        <motion.div
          ref={carouselRef}
          className="flex space-x-4 overflow-x-scroll snap-x snap-mandatory no-scrollbar"
          initial={{ x: 0 }}
          animate={{ x: 0 }}
        >
          {cardContent.map((content, index) => (
            <Card
              key={index}
              className="min-w-[300px] snap-start rounded-xl shadow-lg bg-gradient-to-b from-black to-neutral-950 backdrop-blur-lg"
            >
              <CardHeader>
                <h1 className="font-medium text-xl">{content.title}</h1>
              </CardHeader>
              <Divider />
              <CardBody className="p-4 text-medium font-normal">
                <p>{content.body}</p>
              </CardBody>
              <Divider />
              <CardFooter className="p-4 text-sm font-normal">
                {content.footer}
              </CardFooter>
            </Card>
          ))}
        </motion.div>
      </div>
      <div className="flex mt-4 space-x-4">
        <Button className="rounded-full" isIconOnly onClick={scrollLeft}>
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="size-6"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18"
              />
            </svg>
          </span>
        </Button>
        <Button className="rounded-full" isIconOnly onClick={scrollRight}>
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="size-6"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
              />
            </svg>
          </span>
        </Button>
      </div>
    </div>
  );
};

export default CardCarousel;