import Image from 'next/image'
import React from 'react'
import Link from 'next/link'
import { LocalizedLink } from '@/components/localized-link'
import { Text } from '../ui'
import { StaticImageData } from 'next/image'

interface AudienceCardProps {
  image: string | StaticImageData
  title: string
  description: string
  href?: string
}

function normalizeCardHref(href = '') {
  const trimmedHref = href.trim()

  if (
    !trimmedHref ||
    trimmedHref === '#' ||
    trimmedHref.startsWith('#') ||
    /^(https?:|mailto:|tel:|sms:|\/\/)/i.test(trimmedHref)
  ) {
    return trimmedHref
  }

  return `/${trimmedHref.replace(/^\/+/, '').replace('/#', '#')}`
}

export const AudienceCard = ({
  image,
  title,
  description,
  href,
}: AudienceCardProps) => {
  const normalizedHref = normalizeCardHref(href)
  const isInternal = normalizedHref.startsWith('/') && !normalizedHref.startsWith('//')
  const LinkComponent = isInternal ? LocalizedLink : Link
  const content = (
    <div className=" space-y-5 md:space-y-6 group">
        <div className="relative w-[320px] lg:w-[360px] h-[355px] lg:h-[400px] overflow-hidden rounded-[20px]">
          <Image
            src={image}
            alt={title}
            fill
            sizes="(min-width: 1024px) 360px, 320px"
            className="object-cover rounded-[20px]"
          />
        </div>

   <div className='space-y-[5px] text-black'>
           <Text size='h3' className='font-semibold group-hover:text-secondary' >
          {title}
           </Text>
        <Text size='normal'
        className='max-w-[20rem]'
        textKey={description}/>

   </div>
     
      </div>
  )

  if (!normalizedHref) return content

  return (
    <LinkComponent href={normalizedHref} className='block'>
      {content}
    </LinkComponent>
  )
}