import { AnimatePresence, motion } from 'framer-motion'
import ImageLoader from '@/lib/utils/ImageLoader'
import { Media } from '@/payload-types'
import { cn } from '@/lib/utils/cn'

export interface GragientCardProps {
  icon: string | Media
  title: string
  subtitle?: string
  type: 'small' | 'medium' | 'large'
  isActive: boolean
}

export const GragientCard: React.FC<GragientCardProps> = ({
  icon,
  title,
  subtitle,
  type,
  isActive,
}) => {
  // Размеры карточки в зависимости от type
  let padding = 'p-4'
  let iconSize = 32
  let titleClass = 'b1-regular  text-grey-100'
  let subtitleClass = 'b3-regular text-grey-300 mt-2'
  let height = 'h-[180px] lg:h-[148px]'
  let radius = 'rounded-[12px]'
  let border = 'gradient-border gradient-border--white'
  let gap = 'justify-between'

  if (type === 'medium') {
    // padding = 'p-2'
    // iconSize = 32
    titleClass = 'b2-medium lg:b1-medium  text-grey-200'
    subtitleClass = 'subheadline lg:h4 text-grey-50 mt-2'
    height = 'min-h-[180px] lg:min-h-[192px]'
    gap = 'gap-[40px]'
  } else if (type === 'large') {
    padding = 'p-5'
    iconSize = 36
    titleClass = 'subheadline md:h4 text-base-white'
    subtitleClass = 'b3-regular md:b2-regular text-grey-200 mt-[12px]'
    height = 'min-h-[226px] tablet:min-h-[320px]'
    radius = 'rounded-0'
    border = 'border border-grey-900'
    // gap = 'gap-[101px]'
  }

  return (
    <div
      className={`flex flex-col ${gap}  ${border}  w-full ${height} ${padding} bg-[#141210] tablet:bg-[#221D1A14] ${radius} relative overflow-hidden`}
    >
      <AnimatePresence mode="wait">
        {isActive && (
          <motion.div
            key="glow"
            className="absolute inset-0 overflow-hidden flex items-end justify-center pointer-events-none"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.8, ease: 'easeInOut' }}
          >
            <div className="w-[244px] h-[44px] bg-[#D39E7F] rounded-full blur-[78px] opacity-80" />
          </motion.div>
        )}
      </AnimatePresence>
      <div
        className={cn(
          'p-2 w-fit rounded-full relative z-10 transition-colors duration-800',
          type === 'large' && isActive ? 'bg-base-white' : 'bg-grey-700',
          type === 'large' ? 'self-end' : 'self-start',
        )}
      >
        <ImageLoader width={iconSize} height={iconSize} media={icon} alt="" />
      </div>
      <div className={cn(type === 'large' ? 'min-h-[119px]' : '')}>
        <h3 className={`${titleClass} relative z-10`}>{title}</h3>
        {subtitle && <div className={`${subtitleClass} relative z-10`} dangerouslySetInnerHTML={{ __html: subtitle }}/>}
      </div>
    </div>
  )
}

export default GragientCard
