/components/copyButton/copyable

import { copyButton } from "@hedia/hexui/components/copy-button";
import { input } from "@hedia/hexui/components/input";
import { code, div } from "@hedia/html/elements";

export default {
  CopyableInput,
  StandaloneCopyButton,
};

export function CopyableInput() {
  return [
    input({
      copyable: true,
      id: "client-id",
      label: "Client ID",
      name: "client-id",
      readonly: true,
      type: "text",
      value: "c8d56343-c6b4-4c58-aa72-3ccfa47c0481",
    }),
    input({
      copyable: true,
      id: "client-secret",
      label: "Client Secret",
      name: "client-secret",
      readonly: true,
      type: "text",
      value: "ecf305038c5ae25",
    }),
  ];
}

export function StandaloneCopyButton() {
  return [
    div({ class: "inline-flex" }, code("sk_live_abcde12345"), copyButton({ value: "sk_live_abcde12345" })),
    div({ class: "inline-flex" }, code("client-id-12345"), copyButton({ value: "client-id-12345" })),
  ];
}