"use client";

import { useState } from "react";
import { Check, Copy } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export function ConnectionCodeCard({ memberNumber }: { memberNumber: string }) {
  const [copied, setCopied] = useState(false);

  const copy = async () => {
    if (!memberNumber) return;
    try {
      await navigator.clipboard.writeText(memberNumber);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      /* ignore */
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Bağlantı kodunuz</CardTitle>
        <CardDescription>
          Karşı taraf bu kodu girerek size bağlantı talebi gönderir.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="bg-muted/40 flex items-center justify-between gap-3 rounded-md border px-4 py-3">
          <span className="font-mono text-2xl tracking-[0.4em]">{memberNumber || "—"}</span>
          <Button type="button" variant="outline" size="sm" onClick={copy} disabled={!memberNumber}>
            {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
            {copied ? "Kopyalandı" : "Kopyala"}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}
