'use client';

import { Skeleton } from "@/components/ui/skeleton";
import TabContainer from "@/components/tab/TabContainer";
import { TabHeader } from "@/components/tab/TabHeader";
import { InfoCircle, Star1 } from 'iconsax-react';

const AboutSkeleton = () => {
  const firstTabSkeleton = () => (
    <section className='py-4'>
      {/* اطلاعات رستوران */}
      <section className="bg-container rounded-container shadow-container p-4">
        <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
          <div className="flex-1">
            <Skeleton className="h-6 w-32 rounded-md mb-4" />
            <Skeleton className="h-5 w-24 rounded-md mb-2" />
            <Skeleton className="h-5 w-40 rounded-md" />
          </div>
          <Skeleton className="w-22 h-22 rounded-normal shrink-0" />
        </div>
        <div className="mt-[23px]">
          <Skeleton className="h-5 w-28 rounded-md mb-3" />
          <Skeleton className="h-4 w-full rounded-md mb-2" />
          <Skeleton className="h-4 w-full rounded-md mb-2" />
          <Skeleton className="h-4 w-3/4 rounded-md mb-[23px]" />
          <div className='inline-flex gap-2 items-center'>
            <Skeleton className="w-5 h-5 rounded-md" />
            <Skeleton className="h-5 w-24 rounded-md" />
          </div>
        </div>
      </section>

      {/* ارتباط */}
      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
        <Skeleton className="h-5 w-16 rounded-md" />
        <div className='col-span-1 text-center flex justify-center gap-4'>
          {[...Array(3)].map((_, index) => (
            <Skeleton key={index} className="w-10 h-10 rounded-normal" />
          ))}
        </div>
      </section>

      {/* آدرس */}
      <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
        <Skeleton className="h-5 w-12 rounded-md mb-[9px]" />
        <Skeleton className="h-4 w-full rounded-md mb-2" />
        <Skeleton className="h-4 w-3/4 rounded-md mb-[23px]" />
        <div className='inline-flex gap-2 items-center'>
          <Skeleton className="w-5 h-5 rounded-md" />
          <Skeleton className="h-5 w-24 rounded-md" />
        </div>
      </section>

      {/* ساعات کاری امروز */}
      <section className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
        <div className="flex items-center gap-2">
          <Skeleton className="w-4 h-4 rounded-full" />
          <Skeleton className="h-5 w-8 rounded-md" />
          <Skeleton className="w-1.5 h-1.5 rounded-full" />
          <Skeleton className="h-5 w-32 rounded-md" />
        </div>
        <Skeleton className="w-4 h-4 rounded-md" />
      </section>

      {/* ساعات کاری هفته */}
      {[...Array(3)].map((_, index) => (
        <div
          key={index}
          className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
          <Skeleton className="h-5 w-20 rounded-md" />
          <Skeleton className="h-5 w-24 rounded-md" />
        </div>
      ))}
    </section>
  );

  const secondTabSkeleton = () => (
    <section className='py-4'>
      {/* امتیاز کاربران */}
      <section className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
        <Skeleton className="h-16 w-20 rounded-md mx-auto" />
        <div className="flex flex-col w-fit items-end gap-1">
          {[...Array(5)].map((_, index) => (
            <Skeleton key={index} className="h-4 w-24 rounded-md" />
          ))}
        </div>
      </section>

      {/* نظرات کاربران */}
      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
        <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
          <Skeleton className="h-5 w-24 rounded-md" />
          <Skeleton className="h-8 w-28 rounded-xl" />
        </div>
        <div className="">
          {[...Array(3)].map((_, index) => (
            <div key={index} className="pt-8">
              <div className="flex items-center gap-3 mb-3">
                <Skeleton className="w-10 h-10 rounded-full" />
                <div className="flex-1">
                  <Skeleton className="h-4 w-24 rounded-md mb-2" />
                  <Skeleton className="h-3 w-16 rounded-md" />
                </div>
                <Skeleton className="h-4 w-12 rounded-md" />
              </div>
              <Skeleton className="h-4 w-full rounded-md mb-2" />
              <Skeleton className="h-4 w-3/4 rounded-md mb-4" />
              <Skeleton className="h-3 w-20 rounded-md" />
            </div>
          ))}
        </div>
      </section>
    </section>
  );

  return (
    <div className='pt-8 h-full overflow-y-auto noscrollbar'>
      <TabContainer>
        <TabHeader
          viewRenderer={firstTabSkeleton()}
          title='درباره ما' icon={<InfoCircle size={24} />}>
        </TabHeader>
        <TabHeader
          viewRenderer={secondTabSkeleton()}
          title='امتیازات و نظرات' icon={<Star1 size={24} />}>
        </TabHeader>
      </TabContainer>
    </div>
  );
};

export default AboutSkeleton;