"use client";

import { PageLayout } from "@/components/templates/PageLayout";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";

export function PlanNotFound() {
  const servicesBasePath = useServicesBasePath();

  return (
    <PageLayout
      title="Plan Not Found"
      description="The selected plan could not be found"
      icon={<ExclamationTriangleIcon className="h-6 w-6" />}
    >
      <div className="text-center py-12">
        <ExclamationTriangleIcon className="h-12 w-12 mx-auto text-danger mb-4" />
        <h2 className="text-xl font-semibold text-foreground mb-2">Plan Not Found</h2>
        <p className="text-muted-foreground mb-4">The selected plan could not be found</p>
        <a
          href={`${servicesBasePath}/sim`}
          className="text-primary hover:text-primary-hover font-medium"
        >
          ← Return to SIM Plans
        </a>
      </div>
    </PageLayout>
  );
}
