import { IPostThumbResponseData } from '@/app/api/blog/data';
import routeFactory from '@/assets/constants/routeFactory';
import Button from '@/components/uikit/button';
import { TLocales } from '@/models/layout';
import Image from 'next/image';
import Link from 'next/link';
import { useTranslations } from 'next-intl';

interface Props {
  post: IPostThumbResponseData;
  locale: TLocales;
}

const PostThumb = ({ post, locale }: Props) => {
  const t = useTranslations();
  const routes = routeFactory(t, locale);
  return (
    <div
      key={post.id}
      className="group flex w-full flex-col gap-3 overflow-hidden bg-white md:gap-5"
    >
      <div className="relative aspect-[1.09] w-full overflow-hidden rounded-2xl">
        <Image
          src={post.imageSrc}
          alt={post.title}
          fill
          className="h-auto w-full object-cover"
        />

        <div className="invisible absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 backdrop-blur-xs transition-all group-hover:visible group-hover:opacity-100">
          <Button link={routes.singlePost.route(post.id)} endIcon="showMore">
            {t('page_blog_details_CTA')}
          </Button>
        </div>
      </div>
      <Link
        href={routes.singlePost.route(post.id)}
        className="group-hover:text-primary mb-4 text-center text-gray-500"
      >
        <h2 className="text-base font-medium">{post.title}</h2>
      </Link>
    </div>
  );
};

export default PostThumb;
