import React from "react";
import { LuCopy } from "react-icons/lu";

export default function FtpInfoRow({ label, value, onCopy }) {
  return (
    <div className="p-3 shadow rounded-xl bg-[#f2f2f2] dark:bg-[#001F3F] border border-white/10 flex items-center justify-between gap-3">
      <div className="min-w-0">
        <div className="text-xs opacity-70">{label}</div>
        <div className="text-sm break-all">{value}</div>
      </div>

      {onCopy && value && value !== "-" ? (
        <button
          type="button"
          onClick={() => onCopy(value)}
          className="p-2 shadow rounded-xl hover:bg-white/10"
          title="Copy"
        >
          <LuCopy className="w-4 h-4" />
        </button>
      ) : null}
    </div>
  );
}
