import { useAppKit } from '@reown/appkit/react'
import { useAccount } from 'wagmi'
import { Button, GardenFullLogo, Typography } from '@gardenfi/garden-book'
import { routes } from '../constants/constants';
import { isCurrentRoute, trimAddress } from '../utils/utils';

function Navbar() {
  const { open } = useAppKit();
  const { isConnected, address } = useAccount();

  return (
    <div
      className="flex items-center justify-between gap-3 px-6 py-6 sm:px-10"
    >
      <div className="flex items-center gap-16 py-2">
        <GardenFullLogo
          className="cursor-pointer"
        />
        <div className="hidden gap-12 sm:flex sm:items-center">
          {routes.map(([, route]) => {
            const paths = route.path;
            const isActive = paths.some(isCurrentRoute);
            const primaryPath = paths[0];
            return (
              <a key={primaryPath} href={primaryPath}>
                <Typography size="h2" weight={isActive ? "bold" : "medium"}>
                  {route.name}
                </Typography>
              </a>
            );
          })}
        </div>
      </div>
      {isConnected && address ? (
        <div className="flex items-center gap-4">
          <Typography size="h4" weight="medium" className='hidden sm:block'>Connected: {trimAddress(address)}</Typography>
          <Button variant="secondary" onClick={() => open()} className="ml-auto min-w-28" size="sm">
            Disconnect
          </Button>
        </div>
      ) : (
        <Button variant="primary" onClick={() => open()} className="ml-auto min-w-28" size="sm">
          Connect
        </Button>
      )}
    </div>
  );
}

export default Navbar