import { Button, Reveal } from "@cooud-ui/ui";
import { Check } from "lucide-react";

export function SuccessStateBlock() {
  return (
    <div className="flex min-h-[28rem] flex-col items-center justify-center px-6 py-16 text-center">
      <Reveal className="flex w-full max-w-md flex-col items-center gap-5">
        <span className="inline-flex size-16 items-center justify-center rounded-full bg-success/10 text-success">
          <Check className="size-8" aria-hidden="true" />
        </span>
        <div className="flex flex-col gap-2">
          <h1 className="font-display text-2xl font-semibold text-fg">You&apos;re all set!</h1>
          <p className="text-sm text-fg-secondary">
            Your account is ready. Everything has been configured and is good to go.
          </p>
        </div>
        <div className="flex flex-wrap items-center justify-center gap-3">
          <Button variant="gradient">Go to dashboard</Button>
          <Button variant="ghost">View details</Button>
        </div>
      </Reveal>
    </div>
  );
}