import React, {FC, PropsWithChildren} from "react";
import {CardItemSecondaryValue} from "../CardItemSecondaryValue";
import {__} from "../../globals";
import {renderCurrencyValue} from "../fields/helpers";
import {Color} from "../Color";
import classNames from "classnames";
import {OfferData} from "../store";
import {getCardComponentData} from "../cards";
import {withDecodedEntities} from "../../helpers";

export type OfferCardContentProps = {
    color: Color,
    offer: OfferData,
    title?: string
}

export const OfferCardContent: FC<OfferCardContentProps & PropsWithChildren> = ({color, offer, children, title}) => {
    const cardData = getCardComponentData('offer', offer.type)

    return <div className="space-y-1">
        <CardItemSecondaryValue color={{
            color,
            tint: (color) => color.text(20)
        }}>{title || withDecodedEntities(cardData).name}</CardItemSecondaryValue>
        <div className={`${color.text(10)} flex items-center`}>
            <div
                className={classNames("flex items-center text-3x font-semibold subpixel-antialiased leading-5 whitespace-nowrap", {
                    'tracking-tighter': true,
                })}>
                {children}
            </div>
        </div>
    </div>
}