import clsx from 'clsx'

interface CardProps {
  children: React.ReactNode
  color?: 'gradient' | 'darker' | 'yellow' | 'zinc'
  className?: string | undefined
}

export function Card({ children, color = 'gradient', className }: CardProps) {
  const colorVariants = {
    gradient: 'bg-linear-to-tr from-[#8CD366] via-[#C7D174] to-[#FFCF82]',
    darker: 'bg-green-primary text-white',
    yellow: 'text-green-primary bg-yellow-tertiary',
    zinc: 'text-white bg-zinc-900',
  }

  return (
    <div
      className={clsx(
        'lg:rounded-2xl',
        'lg:drop-shadow-sm',
        'p-3 lg:p-12',
        colorVariants[color],
        className,
      )}
    >
      {children}
    </div>
  )
}