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

// Define custom styles
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
