the-biergarten-app/web/frontend/app/features/breweries/components/LocationCard.tsx

import { lazy, Suspense } from 'react';
import ClientOnly from '../../../components/ClientOnly';
import SidebarCard from './SidebarCard';
import { formatBreweryAddress } from '../utils/format-address';
import type { BreweryLocation } from '../breweries.server';

const BreweryLocationMap = lazy(() => import('./BreweryLocationMap'));

interface LocationCardProps {
    breweryName: string;
    location: BreweryLocation;
    website: string;
}

const MAP_PLACEHOLDER_CLASS = 'skeleton h-45 w-full rounded-field';

const LocationCard = ({ breweryName, location, website }: LocationCardProps) => (
    <SidebarCard title="Location">
        {location.coordinates && (
            <ClientOnly fallback={<div className={MAP_PLACEHOLDER_CLASS} />}>
                {() => (
                    <Suspense fallback={<div className={MAP_PLACEHOLDER_CLASS} />}>
                        <BreweryLocationMap
                            latitude={location.coordinates!.latitude}
                            longitude={location.coordinates!.longitude}
                            label={`${breweryName} — ${location.addressLine1}`}
                        />
                    </Suspense>
                )}
            </ClientOnly>
        )}
        <p className="text-sm leading-relaxed m-0">{formatBreweryAddress(location)}</p>
        <p className="text-sm m-0">
            <a href={`https://${website}`} className="link link-primary" target="_blank" rel="noreferrer">
                {website}
            </a>
        </p>
    </SidebarCard>
);

export default LocationCard;