import { Location } from "@pshershov/cocoa";

const MyComponentBasedOnRoute = () => (
	<Location>
		{location => (
			<Employee
				firstName={location.params.firstName}
				lastName={location.params.lastName}
			/>
		)}
	</Location>
);

import { useLocation } from "@pshershov/cocoa";

const MyComponentBasedOnRoute = () => {
	const {
		params: { id }
	} = useLocation();
	return <MyComponent id={id} />;
};

import { Link } from "@pshershov/cocoa";

const MyComponentWithALink = () => {
	return (
		<Link
			to="/employee"
			params={{
				firstName: "Kevin",
				lastName: "Malone"
			}}
			replace={true}
		>SHOW ME KEVIN<Link />
	);
};

import { link } from "@pshershov/cocoa";

const handleButtonClick = () =>
	link(
		"/employee",
		{
			firstName: "Kevin",
			lastName: "Malone"
		},
		true
	);

const MyComponentThatNavigates = () => <button onClick={handleButtonClick} />;

import { Match } from "@pshershov/cocoa";

const MyComponentThatMatchesPaths = () => (
	<Match
		path="/employee"
		params={{
			firstName: "Kevin",
			lastName: "Malone"
		}}
	>
		<Employee />
	</Match>
);

import { useMatch } from '@pshershov/cocoa'

const MyComponentThatMatchesUsingHook = () => {
  const isKevinMalone = useMatch({
    path: "/employee",
    params: {
			firstName: "Kevin",
			lastName: "Malone"
		}
  });

  return {isKevinMalone ? <Employee firstName="Kevin" lastName="Malone" /> : <NoEmployeeFound />}
}