import type { ComponentPropsWithoutRef, ElementRef } from 'react'
import { forwardRef } from 'react'

import { cn } from '@/lib/utils'

import { BackgroundLayer } from '@/components/background-layer'
import { Card } from '@/components/ui/card'

import { useBackground } from '@/hooks/use-background'

type CardWithBackgroundProps = ComponentPropsWithoutRef<typeof Card>

export const CardWithBackground = forwardRef<
  ElementRef<typeof Card>,
  CardWithBackgroundProps
>(({ className, children, ...props }, ref) => {
  const { config: bg } = useBackground('card')

  return (
    <Card ref={ref} className={cn('relative isolate', className)} {...props}>
      <BackgroundLayer config={bg} layerId="card" />
      <div className="relative z-10">
        {children}
      </div>
    </Card>
  )
})

CardWithBackground.displayName = 'CardWithBackground'