LinkIdCard.tsx

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Copy, Check, ExternalLink, Link2 } from "lucide-react";
import { useState } from "react";
import toast from "react-hot-toast";

export function LinkIdCard({
  username,
  qrCode,
}: {
  username: string;
  qrCode?: React.ReactNode;
}) {
  const [copied, setCopied] = useState(false);

  async function copyProfile() {
    try {
      await navigator.clipboard.writeText(`https://linkid.qzz.io/${username}`);
      setCopied(true);
      toast.success("Profile link copied successfully!");
      setTimeout(() => setCopied(false), 1200);
    } catch (error) {
      toast.error("Unable to copy profile link. Please try again.");
    }
  }

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="flex flex-row items-center gap-2 text-base sm:text-lg">
          <Link2 className="h-4 w-4 sm:h-5 sm:w-5" />
          Your LinkID
        </CardTitle>
        <div className="flex-shrink-0">{qrCode}</div>
      </CardHeader>

      <CardContent className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        {/* Link box */}
        <div className="flex items-center justify-between gap-2 rounded-md bg-muted px-3 py-2 text-sm font-mono w-full sm:w-auto">
          <code className="truncate">linkid.qzz.io/{username}</code>

          <Button
            size="icon"
            variant="ghost"
            onClick={copyProfile}
            className="shrink-0"
            aria-label="Copy profile link"
            title="Copy profile link"
          >
            {copied ? (
              <Check className="h-4 w-4 text-green-600" />
            ) : (
              <Copy className="h-4 w-4" />
            )}
          </Button>
        </div>

        {/* Open button */}
        <Button
          variant="outline"
          asChild
          className="w-full sm:w-auto justify-center gap-2"
        >
          <a href={`/${username}`} target="_blank" rel="noopener noreferrer">
            <ExternalLink className="h-4 w-4" />
            Open
          </a>
        </Button>
      </CardContent>
    </Card>
  );
}