import { Link } from 'react-router-dom';
import AppLayout from './AppLayout';

const quickLinks = [
  { to: '/dashboard/products', label: 'Products', desc: 'Add and manage inventory' },
  { to: '/dashboard/warehouse', label: 'Warehouse', desc: 'Storage locations' },
  { to: '/dashboard/transactions', label: 'Transactions', desc: 'Stock in and out' },
  { to: '/dashboard/reports', label: 'Reports', desc: 'Summary and stock levels' },
];

function Dashboard() {
  const storedUser = localStorage.getItem('user');
  const user = storedUser ? JSON.parse(storedUser) : null;
  const greeting = user?.name ? `Hello, ${user.name}` : 'Dashboard';

  return (
    <AppLayout title={greeting} subtitle="Welcome back">
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        {quickLinks.map((item) => (
          <Link
            key={item.to}
            to={item.to}
            className="card px-4 py-3 transition-colors hover:border-brand-600/30 hover:bg-brand-50/30"
          >
            <p className="text-sm font-medium text-brand-900">{item.label}</p>
            <p className="mt-1 text-xs text-slate-500">{item.desc}</p>
          </Link>
        ))}
      </div>
    </AppLayout>
  );
}

export default Dashboard;
