import { useAuth } from "../context/AuthContext";
import { PageHeader } from "../components/PageHeader";

const CARDS = [
  { label: "Catalog", desc: "Products, categories, pricing", to: "/catalog" },
  { label: "Users", desc: "Manage roles and access", to: "/users" },
  { label: "Vendor", desc: "Business details and tax settings", to: "/vendor" },
  { label: "Reports", desc: "Sales and tax summaries", to: "/reports" },
];

export default function DashboardPage() {
  const { user } = useAuth();

  return (
    <div style={{ padding: "32px 28px", maxWidth: 900 }}>
      <PageHeader
        title="Dashboard"
        subtitle={`Welcome back, ${user?.name} · ${user?.vendorName}`}
      />
      <div style={grid}>
        {CARDS.map((card) => (
          <a key={card.label} href={card.to} style={cardStyle}>
            <div style={{ fontWeight: 600, marginBottom: 4 }}>{card.label}</div>
            <div style={{ color: "var(--color-text-muted)", fontSize: 13 }}>{card.desc}</div>
          </a>
        ))}
      </div>
    </div>
  );
}

const grid: React.CSSProperties = {
  display: "grid",
  gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
  gap: 16,
};

const cardStyle: React.CSSProperties = {
  background: "var(--color-surface)",
  border: "1px solid var(--color-border)",
  borderRadius: "var(--radius)",
  padding: "20px",
  boxShadow: "var(--shadow)",
  textDecoration: "none",
  color: "var(--color-text)",
  display: "block",
};