import { Link } from 'react-router-dom';

const quickLinks = [
  { to: '/dashboard/customers', label: 'Customers', desc: 'Manage customer records' },
  { to: '/dashboard/products', label: 'Products', desc: 'Add and view products' },
  { to: '/dashboard/sales', label: 'Sales', desc: 'Record and track sales' },
  { to: '/dashboard/reports', label: 'Reports', desc: 'View sales summaries' },
];

function Dashboard() {
  return (
    <div>
      <h1 className="text-xl font-semibold text-brand-900 mb-1">Overview</h1>
      <p className="text-sm text-slate-500 mb-6">Quick access to your sales management tools.</p>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {quickLinks.map(({ to, label, desc }) => (
          <Link
            key={to}
            to={to}
            className="card p-4 hover:border-brand-600/40 hover:shadow transition-all group"
          >
            <p className="text-sm font-medium text-brand-800 group-hover:text-brand-700">{label}</p>
            <p className="text-xs text-slate-500 mt-1">{desc}</p>
          </Link>
        ))}
      </div>
    </div>
  );
}

export default Dashboard;
