import React from 'react';
import { classNames } from '../utils/theme';
import { Location } from './LocationFinder';

interface LocationFinderSelectedLocationProps {
    className?: string;
    onBackClick(): void;
    location?: Location;
}

const LocationFinderSelectedLocation = ({ className, onBackClick, location }: LocationFinderSelectedLocationProps) => {
    if (!location) {
        return <div className={classNames('px-4', className)} />;
    }

    const image = location.image && Boolean(location.image.length) ? location.image[0] : undefined;

    return (
        <div className={classNames('px-4', className)}>
            <button onClick={onBackClick}>back</button>
            {image && <img className="aspect-[4/2] object-cover object-center w-full rounded" src={image} />}
        </div>
    );
};

export default LocationFinderSelectedLocation;
