import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import Link from "next/link";

type BreadcrumbItem = { name: string; href: string };

export function TenderDetailsError({
  breadcrumbItems,
}: {
  breadcrumbItems: BreadcrumbItem[];
}) {
  return (
    <>
      <Breadcrumb items={breadcrumbItems} />
      <ShowcaseSection className="!p-8 sm:!p-10">
        <div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
          <p className="text-lg font-semibold text-dark dark:text-white">
            We couldn&apos;t load this tender
          </p>
          <p className="max-w-sm text-sm text-dark-5 dark:text-dark-6">
            Check your connection or try again. You can go back to the tender
            list anytime.
          </p>
          <Link
            href="/tenders"
            className="shadow-theme-xs mt-2 inline-flex items-center justify-center rounded-xl bg-primary px-5 py-2.5 text-sm font-medium text-white transition hover:bg-primary/90"
          >
            Back to tenders
          </Link>
        </div>
      </ShowcaseSection>
    </>
  );
}
