import type { ReactNode } from "react";

export function ShareDetailCard({ children }: { children: ReactNode }) {
  return (
    <div
      className="rounded-[var(--r-md)] mb-3.5"
      style={{
        background: "var(--card)",
        border: "0.5px solid var(--hair)",
        padding: "18px 22px",
      }}
    >
      {children}
    </div>
  );
}

export function ShareRow({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div
      className="grid items-baseline gap-4 py-2.5"
      style={{
        gridTemplateColumns: "110px 1fr",
        borderBottom: "0.5px solid var(--hair)",
        fontSize: "14.5px",
      }}
    >
      <span
        style={{
          fontFamily: "var(--mono)",
          fontSize: 11,
          color: "var(--ink-mute)",
          textTransform: "uppercase",
          letterSpacing: "0.06em",
        }}
      >
        {label}
      </span>
      <span style={{ color: "var(--ink-2)" }}>{children}</span>
    </div>
  );
}