import { Link } from "react-router-dom";
import { useAuth } from "./use-auth";

export function HomePage() {
  const { user } = useAuth();

  if (!user) {
    return null;
  }

  return (
    <div className="mx-auto max-w-3xl space-y-4">
      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h1 className="text-2xl font-semibold text-slate-900">Authenticated user</h1>
        <dl className="mt-4 grid gap-3 text-sm text-slate-700 sm:grid-cols-2">
          <div>
            <dt className="font-medium text-slate-500">Name</dt>
            <dd>{user.name}</dd>
          </div>
          <div>
            <dt className="font-medium text-slate-500">Username</dt>
            <dd>{user.username}</dd>
          </div>
          <div>
            <dt className="font-medium text-slate-500">Role</dt>
            <dd className="capitalize">{user.role}</dd>
          </div>
        </dl>
      </div>
      {user.role === "employee" ? (
        <Link className="inline-flex rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white" to="/orders">
          Open orders
        </Link>
      ) : (
        <div className="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600 shadow-sm">
          Orders workspace is available to employee accounts only.
        </div>
      )}
    </div>
  );
}