Check in here

"use client";
import { useState } from "react";
import { LuLogIn, LuLogOut, LuMapPin } from "react-icons/lu";
import {
  Badge,
  Button,
  MapMarker,
  MapMarkerPlace,
  MapView,
  ToastProvider,
  useToast,
} from "@nexera-ui/react";

const HQ = [-0.1057, 51.5323] as const;
/** A fixed sample position about 40 m from the office; use the browser's location (with consent) in your app. */
const YOU = [-0.1062, 51.532] as const;

/** Times are fixed sample values; use the real clock in your app. */
const CHECK_IN_TIME = "09:12";

function CheckIn() {
  const toasts = useToast();
  const [checkedIn, setCheckedIn] = useState(false);

  const checkIn = () => {
    setCheckedIn(true);
    toasts.add({
      title: `Checked in at ${CHECK_IN_TIME}`,
      description: "Northwind HQ, Islington. Have a good day!",
      tone: "success",
      action: {
        label: "Undo",
        onAction: () => {
          setCheckedIn(false);
        },
      },
    });
  };
  const checkOut = () => {
    setCheckedIn(false);
    toasts.add({
      title: "Checked out",
      description: "Your hours for today are saved.",
      tone: "info",
    });
  };

  return (
    <section
      aria-labelledby="check-in-title"
      className="mx-auto grid w-full max-w-md gap-4 rounded-xl border border-default bg-surface p-4 shadow-xs @3xl:p-5"
    >
      <header className="flex flex-wrap items-start justify-between gap-2">
        <div className="grid gap-1">
          <h2 id="check-in-title" className="text-heading-h3 text-primary">
            Check in here
          </h2>
          <p className="text-body-small text-secondary">Wednesday 7 October 2026</p>
        </div>
        <Badge
          tone={checkedIn ? "success" : "neutral"}
          label={checkedIn ? `In since ${CHECK_IN_TIME}` : "Not checked in"}
          size="md"
        />
      </header>

      <MapView
        aria-label="Map of your location next to Northwind HQ"
        defaultCenter={[-0.106, 51.5322]}
        defaultZoom={16.5}
        controls={false}
        userLocation={YOU}
        height={256}
      >
        <MapMarker lngLat={HQ}>
          <MapMarkerPlace name="Northwind HQ" />
        </MapMarker>
      </MapView>

      <p className="flex items-start gap-2 text-body-small text-secondary">
        <LuMapPin aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-brand-text" />
        You’re 40 m from Northwind HQ, 18 Canal Street, inside the check-in area.
      </p>

      {checkedIn ? (
        <Button
          size="lg"
          variant="secondary"
          leadingIcon={<LuLogOut />}
          onPress={checkOut}
          className="w-full"
        >
          Check out
        </Button>
      ) : (
        <Button size="lg" leadingIcon={<LuLogIn />} onPress={checkIn} className="w-full">
          Check in at Northwind HQ
        </Button>
      )}
      <p className="text-body-caption text-muted">
        Only your check-in time is saved, never your location history.
      </p>
    </section>
  );
}

/** Check in here: shows where you are next to the office and confirms a check-in with a toast. */
export default function CheckInHere() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <ToastProvider>
        <CheckIn />
      </ToastProvider>
    </div>
  );
}