'use client';

import { BASE_URL } from '@/shared/config/api/URLs';
import { Skeleton } from '@/shared/ui/skeleton';
import { useQuery } from '@tanstack/react-query';
import Image from 'next/image';
import { useParams } from 'next/navigation';
import { partner_api } from '../lib/api';

export function AboutHero() {
  const { locale } = useParams();

  const { data: banner, isLoading } = useQuery({
    queryKey: ['about'],
    queryFn: async () => {
      return partner_api.getAbout();
    },
    select(data) {
      return data.data.banner;
    },
  });

  if (isLoading) {
    return (
      <section className="relative h-[60vh] min-h-[500px] flex items-center rounded-lg justify-center overflow-hidden bg-gray-200">
        {/* Background skeleton */}
        <Skeleton className="absolute inset-0 w-full h-full" />
        {/* Content skeleton */}
        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto space-y-6">
          <Skeleton className="h-16 md:h-24 w-3/4 mx-auto rounded-lg" />
          <Skeleton className="h-6 md:h-10 w-5/6 mx-auto rounded-lg" />
          <Skeleton className="h-6 md:h-10 w-4/6 mx-auto rounded-lg" />
        </div>
      </section>
    );
  }

  return (
    <section className="relative h-[60vh] min-h-[500px] flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 z-0">
        <Image
          width={500}
          height={500}
          unoptimized
          src={
            BASE_URL + banner?.image ||
            '/gourmet-food-culinary-magazine-hero-image.jpg'
          }
          alt="Gastro Market"
          className="w-full h-full object-cover brightness-50"
        />
      </div>
      <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
        <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 text-balance">
          {locale === 'uz'
            ? banner?.title_uz || 'Gastro Market'
            : locale === 'ru'
              ? banner?.title_ru || 'Gastro Market'
              : banner?.title_en || 'Gastro Market'}
        </h1>
        <p className="text-xl md:text-2xl text-white/90 font-light leading-relaxed text-balance">
          {locale === 'uz'
            ? banner?.description_uz ||
              "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin"
            : locale === 'ru'
              ? banner?.description_ru ||
                'Ведущий интернет-магазин по гастрономии и кулинарному искусству'
              : banner?.description_en ||
                "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin"}
        </p>
      </div>
    </section>
  );
}