import { Card } from "@heroui/react";
import { tv, type VariantProps } from "tailwind-variants";
import React from "react";

// Define custom styles
export const customStyles = tv({
  variants: {
    variant: {
      glass: "bg-white/70 backdrop-blur-md border-white/20 shadow-xl dark:bg-black/70 dark:border-white/10",
      neon: "border border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.5)] bg-gray-900/90 text-white",
      minimal: "border-none shadow-none bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
      modern: "bg-default-50/40 hover:bg-default-100/60 transition-all duration-500 border-none shadow-sm hover:shadow-xl hover:-translate-y-1 rounded-3xl",
    },
  },
  defaultVariants: {
    variant: "modern",
  }
});

type CustomCardProps = React.ComponentProps<typeof Card> & VariantProps<typeof customStyles>;

// Create the custom component
export function CustomCard({ className, variant, ...props }: CustomCardProps) {
  // Use custom styles and merge with className
  return <Card className={customStyles({ variant, className })} {...props} />;
}

// Attach subcomponents to the custom component for easier usage
CustomCard.Header = Card.Header;
CustomCard.Content = Card.Content;
CustomCard.Footer = Card.Footer;
CustomCard.Title = Card.Title;
CustomCard.Description = Card.Description;