import { ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';

const DEFAULT_AURA_IMAGE = 'https://cdn-o.suno.com/auras-v2/Aura-1-Hero.jpg';

export const AuraCard = ({
  children,
  auraImage = DEFAULT_AURA_IMAGE,
  className,
}: {
  children: ReactNode;
  auraImage?: string;
  className?: string;
}) => {
  return (
    <div
      className={twMerge('relative isolate overflow-hidden', className)}
      style={{ clipPath: 'inset(0 round var(--radius-3xl))' }}
    >
      <div
        className='absolute inset-0 bg-cover bg-center'
        style={{
          backgroundImage: `
            linear-gradient(138.36deg,
              rgba(var(--rgb-background-primary) / 0) 0%,
              rgba(var(--rgb-background-primary) / 1.0) 76.47%),
            url('${auraImage}')
          `,
        }}
      />
      <div className='absolute inset-0 bg-background-primary/30' />
      <div className='relative z-10 p-4'>{children}</div>
    </div>
  );
};