"use client";

import { Search } from "lucide-react";

export default function LogsPage() {
  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" }}
        >
          Logs
        </h1>
        <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
          View application and server logs.
        </p>
      </div>

      <div
        style={{
          background: "#18181b",
          borderRadius: 12,
          overflow: "hidden",
          color: "#e4e4e7",
          fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
        }}
      >
        <div
          style={{
            padding: "12px 16px",
            borderBottom: "1px solid #3f3f46",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              background: "#27272a",
              borderRadius: 6,
              padding: "4px 10px",
              width: 300,
            }}
          >
            <Search size={14} color="#a1a1aa" />
            <input
              type="text"
              placeholder="Filter logs..."
              style={{
                border: "none",
                outline: "none",
                background: "transparent",
                fontSize: "0.8rem",
                width: "100%",
                color: "#fff",
              }}
            />
          </div>
        </div>
        <div
          style={{
            padding: "16px",
            fontSize: "0.85rem",
            lineHeight: 1.6,
            height: 400,
            overflowY: "auto",
          }}
        >
          <div style={{ display: "flex", gap: 16 }}>
            <span style={{ color: "#71717a" }}>14:32:01</span>
            <span style={{ color: "#10b981" }}>[info]</span>
            <span>Server started on port 3000</span>
          </div>
          <div style={{ display: "flex", gap: 16 }}>
            <span style={{ color: "#71717a" }}>14:32:05</span>
            <span style={{ color: "#10b981" }}>[info]</span>
            <span>Database connected successfully</span>
          </div>
          <div style={{ display: "flex", gap: 16 }}>
            <span style={{ color: "#71717a" }}>14:45:12</span>
            <span style={{ color: "#3b82f6" }}>[http]</span>
            <span>GET /api/users 200 OK - 45ms</span>
          </div>
        </div>
      </div>
    </div>
  );
}