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

const RetroCard: React.FC = () => {
  return (
    <Card className="h-48 w-80 bg-gradient-to-t from-neutral-950 to-neutral-900 relative overflow-hidden">
      {/* Top Gradient Shadow */}
      <div className="absolute top-0 left-0 w-full h-8 bg-gradient-to-b from-neutral-900 to-transparent"></div>
      
      {/* Bottom Gradient Shadow */}
      <div className="absolute bottom-0 left-0 w-full h-8 bg-gradient-to-t from-neutral-950 to-transparent"></div>

      <motion.div
        className="absolute inset-0 h-full w-full bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:30px_48px]"
        animate={{ backgroundPositionY: ['0%', '100%'] }}
        transition={{ duration: 3, ease: 'linear', repeat: Infinity }}
        style={{ transform: 'perspective(500px) rotateX(45deg)' }}
      ></motion.div>

      <CardBody className="text-center">
        <h1 className="mt-12 text-medium text-white">
          Retro Card<br />Eternity UI is awesome
        </h1>
      </CardBody>
    </Card>
  );
};

export default RetroCard;