import {DateTime} from "luxon";
import React, {FC} from "react";
import classNames from "classnames";

interface Props {
    date: string
    className?: string;
}

const DateBadge: FC<Props> = ({ className, date }) => {
    const isToday = DateTime.fromISO(date).toFormat("yyyy-LL-dd") == DateTime.now().toFormat("yyyy-LL-dd")

    const textStyle = classNames("inline font-bold", {
        'text-accent': isToday,
        'text-secondary': !isToday,
    }, className)

    return (
        <div className="flex-none w-20 text-center my-auto pb-3 px-3">
            <div className={classNames(textStyle, 'text-3xl')}>{DateTime.fromISO(date).toFormat("dd")}</div>
            <br/>
            <div className={classNames(textStyle, 'text-xl uppercase')}>{DateTime.fromISO(date).toFormat("LLL")}</div>
        </div>
    )
}

export default DateBadge