"use client";

import { Clock } from "lucide-react";
import { Button } from "@/components/atoms/button";
import { formatIsoDate } from "@/shared/utils";

interface InternetPendingStateProps {
  requestedAt?: string | null | undefined;
  servicesBasePath: string;
}

/**
 * Displays the pending verification state for internet eligibility.
 * Shown when user has requested eligibility check but it's still being processed.
 */
export function InternetPendingState({ requestedAt, servicesBasePath }: InternetPendingStateProps) {
  return (
    <>
      <div className="bg-info-soft/30 border border-info/20 rounded-xl p-8 mb-6 text-center max-w-2xl mx-auto">
        <Clock className="h-16 w-16 text-info mx-auto mb-6" />
        <h2 className="text-2xl font-semibold text-foreground mb-3">Verification in Progress</h2>
        <p className="text-base text-muted-foreground mb-4 leading-relaxed">
          We're currently verifying NTT service availability at your registered address.
          <br />
          This manual check ensures we offer you the correct fiber connection type.
        </p>

        <div className="inline-flex flex-col items-center p-4 bg-background rounded-lg border border-border">
          <span className="text-sm font-medium text-foreground mb-1">Estimated time</span>
          <span className="text-sm text-muted-foreground">1-2 business days</span>
        </div>

        {requestedAt && (
          <p className="text-xs text-muted-foreground mt-6">
            Request submitted: {formatIsoDate(requestedAt)}
          </p>
        )}
      </div>

      <div className="text-center">
        <Button as="a" href={servicesBasePath} variant="outline">
          Back to Services
        </Button>
      </div>
    </>
  );
}
