'use client';

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

export function AboutContent() {
  const t = useTranslations();
  const { locale } = useParams();

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

  const aboutText = about?.text;
  const images = about?.images;

  // Loading holati
  if (loadingText) {
    return (
      <section className="py-20 px-4">
        <div className="max-w-7xl mx-auto">
          {/* Text Skeleton */}
          <div className="mb-20 text-center space-y-6">
            <Skeleton className="h-12 md:h-16 w-3/4 mx-auto rounded-lg" />
            <Skeleton className="h-6 md:h-8 w-5/6 mx-auto rounded-lg" />
            <Skeleton className="h-6 md:h-8 w-5/6 mx-auto rounded-lg" />
          </div>

          {/* Image Gallery Skeleton */}
          <div className="mb-20">
            <Skeleton className="h-8 w-1/3 mx-auto rounded-lg mb-12" />
            <div className="grid md:grid-cols-3 gap-6">
              {[...Array(3)].map((_, idx) => (
                <Skeleton
                  key={idx}
                  className="aspect-[4/3] w-full rounded-lg"
                />
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="py-20 px-4">
      <div className="max-w-7xl mx-auto">
        {/* About Text */}
        <div className="mb-20 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-8 text-balance">
            {locale === 'uz'
              ? aboutText?.[0]?.title_uz || 'Gastro Market'
              : locale === 'ru'
                ? aboutText?.[0]?.title_ru || 'Gastro Market'
                : aboutText?.[0]?.title_en || 'Gastro Market'}
          </h2>
          <p className="text-lg text-muted-foreground leading-relaxed mb-6">
            {locale === 'uz'
              ? aboutText?.[0]?.description_uz ||
                "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin"
              : locale === 'ru'
                ? aboutText?.[0]?.description_ru ||
                  'Ведущий интернет-магазин по гастрономии и кулинарному искусству'
                : aboutText?.[0]?.description_en ||
                  "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin"}
          </p>
        </div>

        {/* Image Gallery */}
        <div className="mb-20">
          <h3 className="text-3xl font-bold text-center mb-12 text-balance">
            {t('Bizning dunyo')}
          </h3>
          <div className="grid md:grid-cols-3 gap-6">
            {images?.map((image, idx) => (
              <div
                key={idx}
                className="relative aspect-[4/3] overflow-hidden rounded-lg group"
              >
                <Image
                  width={500}
                  height={500}
                  src={BASE_URL + image.image || '/placeholder.svg'}
                  alt={image.id.toString()}
                  unoptimized
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
