"use client";

import SectionTitle from "@/components/Shared/SectionTitle/Index";
import { useTranslations } from "next-intl";

export default function BookingEndedSection() {
  const t = useTranslations("BookingEnded");

  return (
    <section className="flex flex-col gap-5 md:gap-10">
      <div className="flex items-center gap-2 sm:gap-3 justify-center md:justify-start text-center md:text-start">
        <svg
          width="38"
          height="53"
          viewBox="0 0 38 53"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="text-vendor-primary"
        >
          <path
            d="M37.4615 46.3043C36.4373 37.2938 32.3252 33.559 29.3216 30.8356C27.2451 28.9453 26.2466 27.9621 26.2466 26.25C26.2466 24.5614 27.2416 23.5969 29.3123 21.7453C32.3509 19.0301 36.5123 15.3106 37.4638 6.17815C37.5399 5.4109 37.454 4.63623 37.2118 3.90426C36.9696 3.17229 36.5763 2.49933 36.0576 1.92893C35.5036 1.31969 34.8281 0.833275 34.0746 0.501047C33.3211 0.168818 32.5064 -0.00185453 31.683 2.87844e-05H5.81031C4.98571 -0.00254704 4.16973 0.167781 3.41502 0.500022C2.66031 0.832264 1.98364 1.31904 1.42867 1.92893C0.911467 2.50012 0.519733 3.17337 0.27873 3.90526C0.037727 4.63715 -0.0471935 5.41143 0.0294463 6.17815C0.977493 15.2813 5.12359 18.9739 8.15054 21.6692C10.2412 23.5313 11.2466 24.5028 11.2466 26.25C11.2466 28.0196 10.2388 29.011 8.14117 30.9082C5.15288 33.6153 1.05132 37.3219 0.0317905 46.3043C-0.0509917 47.0681 0.0283419 47.8407 0.264607 48.5717C0.500872 49.3028 0.88875 49.9757 1.40288 50.5465C1.95902 51.1635 2.63897 51.6564 3.39838 51.993C4.1578 52.3296 4.97964 52.5024 5.81031 52.5H31.683C32.5136 52.5024 33.3355 52.3296 34.0949 51.993C34.8543 51.6564 35.5342 51.1635 36.0904 50.5465C36.6045 49.9757 36.9924 49.3028 37.2287 48.5717C37.4649 47.8407 37.5443 47.0681 37.4615 46.3043ZM28.9771 46.875H8.56656C6.73843 46.875 6.22281 44.7657 7.50484 43.4578C10.608 40.3125 16.8716 38.0602 16.8716 34.4532V22.5C16.8716 20.1739 12.4185 18.3985 9.66343 14.625C9.20874 14.0028 9.25445 13.125 10.4099 13.125H27.1361C28.1216 13.125 28.3337 13.9957 27.8861 14.6192C25.1709 18.3985 20.6216 20.1621 20.6216 22.5V34.4532C20.6216 38.0309 27.1502 39.961 30.0435 43.4614C31.2095 44.8723 30.8017 46.875 28.9771 46.875Z"
            fill="currentColor"
          />
        </svg>
        <SectionTitle title={t("title")} />
      </div>
      <p className="text-[18px] font-medium md-5 md:mb-10 text-center md:text-start">
        {t("description")}
      </p>
      <div className="flex items-center justify-center w-full max-w-[350px] aspect-square rounded-full bg-vendor-primary/10 mx-[auto]">
        <img src="/images/BookingEnded.svg" alt={t("title")} />
      </div>
    </section>
  );
}