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

const quickLinks = [
  { to: '/dashboard/supplier', label: 'Suppliers', desc: 'Manage supplier records' },
  { to: '/dashboard/shipment', label: 'Shipments', desc: 'Track shipment status' },
  { to: '/dashboard/delivery', label: 'Deliveries', desc: 'Record deliveries' },
  { to: '/dashboard/reports', label: 'Reports', desc: 'View summary reports' },
];

function DashboardHome() {
  return (
    <div className="page-content">
      <h1 className="page-title">Overview</h1>
      <p className="page-subtitle">Manage your supply chain from one place.</p>

      <div className="grid gap-4 sm:grid-cols-2">
        {quickLinks.map(({ to, label, desc }) => (
          <Link
            key={to}
            to={to}
            className="card card-body hover:border-brand-600/40 transition-colors group"
          >
            <h3 className="text-sm font-semibold text-brand-800 group-hover:text-brand-700">
              {label}
            </h3>
            <p className="text-sm text-muted mt-1">{desc}</p>
          </Link>
        ))}
      </div>
    </div>
  );
}

export default DashboardHome;
