"use client";

import { useState } from "react";
import { Copy, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";

export function UuidGenerator() {
  const [values, setValues] = useState<string[]>(() => createMany());

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap gap-2">
        <Button onClick={() => setValues(createMany())}>
          <RefreshCw className="mr-2 h-4 w-4" />
          Neue UUIDs
        </Button>
        <Button variant="outline" onClick={() => navigator.clipboard.writeText(values.join("\n"))}>
          <Copy className="mr-2 h-4 w-4" />
          Alle kopieren
        </Button>
      </div>

      <div className="space-y-2">
        {values.map((value) => (
          <div key={value} className="flex items-center gap-2 rounded-lg border bg-gray-50 p-3">
            <code className="flex-1 break-all text-sm text-gray-800">{value}</code>
            <Button size="icon" variant="ghost" onClick={() => navigator.clipboard.writeText(value)} aria-label="UUID kopieren">
              <Copy className="h-4 w-4" />
            </Button>
          </div>
        ))}
      </div>
    </div>
  );
}

function createMany() {
  return Array.from({ length: 5 }, () => crypto.randomUUID());
}