import cx from 'classnames';
import dayjs from 'dayjs';
import React from 'react';
import type { FC, ReactNode } from 'react';
import type { Product } from 'src/types';

export interface ReleaseScheduleDisplayProps {
    className?: string;
    title: string;
    product: Product;
    children: ReactNode;
}

export const ReleaseScheduleDisplay: FC<ReleaseScheduleDisplayProps> = ({
    className,
    title,
    product,
    children,
}) => (
    <div className={cx('ReleaseScheduleDisplay', className)}>
        <div className="ReleaseScheduleDisplay-product-info">
            <div className="ReleaseSchedulDisplay-product-name">
                <span className="field-label">
                    {$t('releaseScheduler.releaseScheduleDisplay.productName')}:{' '}
                </span>
                {product.productName}
            </div>
            <div className="ReleaseScheduleDisplay-sales-start-date">
                <span className="field-label">
                    {$t(
                        'releaseScheduler.releaseScheduleDisplay.salesStartDate'
                    )}
                    :{' '}
                </span>
                {dayjs(product.saleStartDate).format('DD MMM YYYY [at] HH:mm')}
            </div>
        </div>
        <div className="ReleaseScheduleDisplay-table-display">
            <div className="ReleaseScheduleDisplay-table-container">
                <div className="ReleaseScheduleDisplay-table-title">
                    {title}
                </div>
                {children}
            </div>
        </div>
    </div>
);

export default ReleaseScheduleDisplay;