import { IconClock } from "@/components/icons";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

type Props = {
  endpoint: string;
  description: string;
  title?: string;
};

export function PendingEndpoint({
  endpoint,
  description,
  title = "Endpoint à livrer côté missioflow-app",
}: Props) {
  return (
    <Card className="mf-fade-in">
      <div className="px-5 py-5">
        <div className="flex items-start gap-4">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-warning-subtle text-warning ring-1 ring-amber-200">
            <IconClock size={18} />
          </div>
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2 flex-wrap">
              <h3 className="text-sm font-semibold text-foreground">{title}</h3>
              <Badge tone="warning">en attente</Badge>
            </div>
            <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed">
              {description}
            </p>
            <code className="mt-3 inline-flex items-center rounded-md bg-surface-2 border border-border px-2.5 py-1 font-mono text-xs text-foreground">
              {endpoint}
            </code>
          </div>
        </div>
      </div>
    </Card>
  );
}