import React from 'react';
import { useMultiStyleConfig, Box, AspectRatio, chakra } from '@chakra-ui/react';
import Stack from '../stack/index.js';
import MissingImage from '../missingImage/index.js';
import Grid from '../grid/index.js';

var VehicleReference = function (_a) {
    var image = _a.image, vehicleTitle = _a.vehicleTitle, price = _a.price, sellerName = _a.sellerName, sellerAddress = _a.sellerAddress, callToAction = _a.callToAction, _b = _a.templateColumns, templateColumns = _b === void 0 ? { base: 'auto 1fr', md: '1fr' } : _b;
    var styles = useMultiStyleConfig("VehicleReference");
    return (React.createElement(Box, { as: "article" },
        React.createElement(Grid, { templateColumns: templateColumns, gap: "md" },
            React.createElement(AspectRatio, { minW: "2xl", ratio: 4 / 3, borderRadius: "sm", overflow: "hidden" }, image ? image : React.createElement(MissingImage, null)),
            React.createElement(Stack, { spacing: { base: 'xs', md: 'md' }, justify: { base: 'center', md: 'space-between' } },
                React.createElement(chakra.p, { __css: styles.carTitle }, vehicleTitle),
                React.createElement(chakra.span, { __css: styles.price }, price),
                React.createElement(Box, null,
                    React.createElement(chakra.p, { __css: styles.dealerName }, sellerName),
                    React.createElement(chakra.p, { __css: styles.dealerAddress }, sellerAddress)))),
        callToAction ? (React.createElement(Box, { marginTop: { base: 'lg', md: 'sm' } }, callToAction)) : null));
};

export { VehicleReference as default };
//# sourceMappingURL=index.js.map
