Claim Deployment

"use client";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { ExternalLink } from "lucide-react";
import type { SVGProps } from "react";

type ClaimDeploymentProps = {
  url: string;
  onClaimClick: () => void;
};

type VercelLogoProps = SVGProps<SVGSVGElement>;

const VercelLogo = ({ className }: VercelLogoProps) => (
  <svg
    className={className}
    fill="none"
    viewBox="0 0 76 65"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>Vercel Logo</title>
    <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="currentColor" />
  </svg>
);

export const ClaimDeployment = ({
  url,
  onClaimClick,
}: ClaimDeploymentProps) => (
  <Card className="shadow-none">
    <CardHeader>
      <CardTitle>Your Deployment is Ready</CardTitle>
      <CardDescription>
        Claim it to manage it from your own account and make future updates.
      </CardDescription>
    </CardHeader>
    <CardContent className="space-y-4">
      <div className="relative flex items-center gap-2 rounded-md bg-secondary p-1">
        <Input
          className="flex-1 border-none bg-transparent shadow-none"
          readOnly
          value={url}
        />
        <Button
          aria-label="Copy URL"
          className="shrink-0"
          onClick={() => navigator.clipboard.writeText(url)}
          size="sm"
          variant="ghost"
        >
          <ExternalLink className="size-4" />
        </Button>
      </div>

      {/** biome-ignore lint/performance/noImgElement: Framework-agnostic image */}
      <img
        alt="Deployment"
        className="overflow-hidden rounded-md"
        height={700}
        src="https://placehold.co/1440x700"
        width={1440}
      />

      <Button className="w-full" onClick={onClaimClick}>
        <VercelLogo className="w-4" />
        Claim Deployment
      </Button>
    </CardContent>
  </Card>
);