"use client";

import { Copy, Key } from "lucide-react";

export default function ApiPage() {
  return (
    <div
      style={{
        padding: "32px 48px",
        fontFamily: '"Outfit", "Inter", sans-serif',
        color: "#18181b",
        maxWidth: 900,
      }}
    >
      <div style={{ marginBottom: 24 }}>
        <h1
          style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
        >
          API & Webhooks
        </h1>
        <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
          Connect external services to your application.
        </p>
      </div>

      <div
        style={{
          background: "#fff",
          border: "1px solid #e4e4e7",
          borderRadius: 12,
          padding: "24px",
          marginBottom: 32,
        }}
      >
        <h2 style={{ fontSize: "1rem", fontWeight: 600, margin: "0 0 16px 0" }}>
          REST API Endpoint
        </h2>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div
            style={{
              flex: 1,
              background: "#fafafa",
              border: "1px solid #e4e4e7",
              borderRadius: 8,
              padding: "10px 16px",
              fontSize: "0.9rem",
              color: "#71717a",
              display: "flex",
              alignItems: "center",
              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
            }}
          >
            <span style={{ color: "#18181b" }}>
              https://api.steadfast-camp-core-flow.vibn.app/v1
            </span>
          </div>
          <button
            style={{
              width: 40,
              height: 40,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              background: "#fff",
              border: "1px solid #e4e4e7",
              borderRadius: 8,
              cursor: "pointer",
            }}
          >
            <Copy size={16} color="#71717a" />
          </button>
        </div>
      </div>

      <div
        style={{
          background: "#fff",
          border: "1px solid #e4e4e7",
          borderRadius: 12,
          padding: "24px",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: 16,
          }}
        >
          <h2 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>
            API Keys
          </h2>
          <button
            style={{
              background: "#18181b",
              color: "#fff",
              border: "none",
              borderRadius: 8,
              padding: "8px 16px",
              fontSize: "0.85rem",
              fontWeight: 500,
              cursor: "pointer",
            }}
          >
            Generate Key
          </button>
        </div>

        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 16,
            padding: "16px 0",
            borderBottom: "1px solid #e4e4e7",
          }}
        >
          <div
            style={{
              width: 40,
              height: 40,
              background: "#fafafa",
              border: "1px solid #e4e4e7",
              borderRadius: 8,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Key size={16} color="#18181b" />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, marginBottom: 4 }}>
              Production Key
            </div>
            <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
              Created 2 days ago
            </div>
          </div>
          <div
            style={{
              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
              fontSize: "0.85rem",
              color: "#71717a",
              background: "#fafafa",
              padding: "4px 8px",
              borderRadius: 6,
              border: "1px solid #e4e4e7",
            }}
          >
            pk_live_*******************
          </div>
        </div>
      </div>
    </div>
  );
}
