import type { ReactNode } from 'react';
import { Link } from 'react-router-dom';
import { Boxes, ChevronRight, Eye, RefreshCw } from 'lucide-react';

/**
 * The three things most often done from this board.
 *
 * Lifted out of the shop card when that card went. They belong beside Store
 * health rather than under it: the health panel is where a merchant learns that
 * something needs doing, and these are the doors to go and do it.
 *
 * Deliberately three. A column of nine shortcuts is a second navigation, and
 * this console already has one along the top.
 */
export function QuickActions({ base }: { base: string }) {
  return (
    <section className="panel">
      <header className="panel-head">
        <div>
          <h3 className="panel-title">Quick actions</h3>
          <p className="panel-sub">The three things most often done from here</p>
        </div>
      </header>
      <div className="quick-list">
        <Action
          to={`${base}/inventory?tab=products`}
          icon={<Eye size={15} />}
          label="View store"
          note="what a shopper sees"
        />
        <Action
          to={`${base}/inventory?tab=catalogue`}
          icon={<Boxes size={15} />}
          label="Manage catalogue"
          note="add and price products"
        />
        <Action
          to={`${base}/inventory?tab=stock`}
          icon={<RefreshCw size={15} />}
          label="Update inventory"
          note="upload today's counts"
        />
      </div>
    </section>
  );
}

function Action({
  to, icon, label, note,
}: { to: string; icon: ReactNode; label: string; note: string }) {
  return (
    <Link to={to} className="quick">
      <span className="tile" data-tone="brand" aria-hidden>{icon}</span>
      <span className="quick-text">
        <span className="quick-label">{label}</span>
        <span className="quick-note">{note}</span>
      </span>
      <ChevronRight size={15} className="quick-chev" />
    </Link>
  );
}