import { Section } from '@/components/ui/section'
import ImageLoader from '@/lib/utils/ImageLoader'
import { MarkComponent, ReachTextType } from '@/lib/utils/MarkComponent'
import { Media } from '@/payload-types'

export const CurrentPrice = ({
  title,
  description,
  bg,
}: {
  title: string
  description: ReachTextType
  bg: string | Media
}) => {
  return (
    <Section sectionClass="relative overflow-hidden" boxClass=" py-[80px] tablet:py-[100px] xl:py-[120px]">
      <div className="w-[261px] h-[179px] rounded-[261px] bg-[#D39E7F] blur-[165px] shrink-0 absolute top-1/3 right-[90%]" />
      <div className="absolute max-w-[670px] w-full tablet:w-1/2 top-1/4 tablet:top-0 left-1/2 tablet:left-auto tablet:right-0 h-full">
        <ImageLoader className="w-full h-full object-contain tablet:object-cover object-left" media={bg} />
      </div>
      <div className="py-8 xl:max-w-[584px] tablet:max-w-[493px] max-w-[328px] relative z-10">
        <h2 className="text-base-white h4 tablet:h2 xl:h1 mb-2">{title}</h2>
        <p className="text-grey-100 b3-regular tablet:b2-regular xl:b1-regular">
          <MarkComponent boldClass="text-grey-50" title={description} />
        </p>
      </div>
      
      <div className="bg-gradient-to-b from-black/0 to-black h-[119px] w-full absolute bottom-0 left-0" />
    </Section>
  )
}
