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

export function NotFoundBlock() {
  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="bg-gradient-primary bg-clip-text font-display text-7xl font-bold text-transparent">
          404
        </span>
        <div className="flex flex-col gap-2">
          <h1 className="font-display text-2xl font-semibold text-fg">Page not found</h1>
          <p className="text-sm text-fg-secondary">
            The page you&apos;re looking for doesn&apos;t exist or has been moved.
          </p>
        </div>
        <div className="relative w-full max-w-xs">
          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-fg-tertiary" />
          <Input className="pl-9" placeholder="Search the docs…" />
        </div>
        <div className="flex flex-wrap items-center justify-center gap-3">
          <Button variant="gradient">Back to home</Button>
          <Button variant="ghost">Contact support</Button>
        </div>
      </Reveal>
    </div>
  );
}