'use client'

import { cn } from '@/lib/utils/cn'
import ImageLoader from '@/lib/utils/ImageLoader'
import { useCurrentLocale } from '@/locales/client'
import { Media } from '@/payload-types'
import Link from 'next/link'

export const NewsCard = ({
  image,
  title,
  text,
  className,
  id,
}: {
  image: Media
  title: string
  text: string
  className?: string
  id: string
}) => {
  const locale = useCurrentLocale()

  return (
    <Link href={`/${locale}/blog/${id}`}>
      <div
        className={cn(
          'w-[280px] md:w-[340px] shadow text-white gradient-border gradient-border--white rounded-2xl p-4',
          'transition-shadow duration-300 ease-in-out hover:shadow-lg',
        )}
      >
        <ImageLoader
          width={280}
          height={200}
          media={image}
          alt={image.alt || ''}
          className="w-full h-[200px] object-cover"
        />
        <h3 className={cn('subheadline-medium font-bold mt-3 text-black', className)}>{title}</h3>
        <p className="text-b3-regular mt-2 text-neutral-400">{text}</p>
      </div>
    </Link>
  )
}
