import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { ConditionsSection, FaqSection, Media } from '@/payload-types'
import { FaQSection } from '../Home/FaqSection'
import { Conditions } from '../RentalTerms/Conditions'
import CarCard from '@/components/shared/cards/CarCard'
import { cn } from '@/lib/utils/cn'
import { RichText } from '@/components/shared/RichText/RichText'
import { Vehicle } from '@/lib/types/api/vehicle'
import { useI18n } from '@/locales/client'

export const TabsContentBlock = ({
  car,
  faq,
  conditions,
  queryDate,
}: {
  car: Vehicle
  faq: FaqSection
  conditions: ConditionsSection
  queryDate: string
}) => {
  const t = useI18n()
  return (
    <Tabs defaultValue="1">
      <TabsList className="w-full overflow-x-auto">
        {/* <TabsTrigger className={cn('max-w-fit')} value="1">
          About the car
        </TabsTrigger> */}
        <TabsTrigger className={cn('max-w-fit')} value="1">
          {t('catalog.tabsContent.rentalTerms')}
        </TabsTrigger>
        <TabsTrigger className={cn('max-w-fit')} value="2">
          {t('catalog.tabsContent.payment')}
        </TabsTrigger>
      </TabsList>
      <div className="flex flex-col lg:flex-row  justify-between relative gap-4">
        <div className="w-full lg:w-[884px]">
          {/* <TabsContent value="1">
            <div className="h4 md:h3 my-8 text-base-white">
              {t('catalog.tabsContent.about')} –{' '}
              {car.brand.charAt(0).toUpperCase() +
                car.brand.slice(1).toLowerCase() +
                ' ' +
                car.mark}
            </div>
            {/* <RichText data={car.carDescription} /> */}
          {/* </TabsContent> */}
          <TabsContent value="1">
            <FaQSection {...faq} isInfoPage={true} />
            <Conditions {...conditions} />
          </TabsContent>
          <TabsContent value="2">
            <div className="h4 md:h3 my-8 text-base-white">{t('catalog.tabsContent.payment')}</div>
            <div className="b1-regular text-grey-200" dangerouslySetInnerHTML={{ __html: t('catalog.payment.firstParagraph') }}>
              {/* The rental cost starts from
              <span className="b1-semibold text-grey-50"> €40 per day</span> for a
              <span className="b1-semibold text-grey-50"> 30-day rental</span> and depends on the
              season and the <span className="b1-semibold text-grey-50"> number of days.</span> */}
              {/* {t('catalog.payment.firstParagraph')} */}
            </div>
            <div className="b1-regular text-grey-200 mt-4">
              {t('catalog.payment.secondParagraph')}
            </div>
          </TabsContent>
        </div>
        <div className="hidden lg:block sticky top-20 right-0 h-fit">
          <CarCard
            href={`/booking/${car.id}?${queryDate}`}
            type={
              car.brand.charAt(0).toUpperCase() + car.brand.slice(1).toLowerCase() + ' ' + car.mark
            }
            price={car.price}
            image={car.thumbnail}
            carLabels={[car.color.title, `${car.number_seats} seats`].filter(Boolean)}
            id={car.id}
          />
        </div>
      </div>
    </Tabs>
  )
}
