import { FC, useMemo } from 'react';
import { LocalizeText } from '../../../api';
import { Base, BaseProps } from '../../Base';
import { Column } from '../../Column';
import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView';

interface LayoutLimitedEditionCompletePlateViewProps extends BaseProps<HTMLDivElement> {
    uniqueLimitedItemsLeft: number;
    uniqueLimitedSeriesSize: number;
}

export const LayoutLimitedEditionCompletePlateView: FC<LayoutLimitedEditionCompletePlateViewProps> = (props) => {
    const { uniqueLimitedItemsLeft = 0, uniqueLimitedSeriesSize = 0, classNames = [], ...rest } = props;

    const getClassNames = useMemo(() => {
        const newClassNames: string[] = ['unique-complete-plate'];

        if (classNames.length) newClassNames.push(...classNames);

        return newClassNames;
    }, [classNames]);

    return (
        <Base classNames={getClassNames} {...rest}>
            <Column className="plate-container" gap={0}>
                <div className="flex justify-between items-center">
                    {LocalizeText('unique.items.left')}
                    <div>
                        <LayoutLimitedEditionStyledNumberView value={uniqueLimitedItemsLeft} />
                    </div>
                </div>
                <div className="flex justify-between items-center">
                    {LocalizeText('unique.items.number.sold')}
                    <div>
                        <LayoutLimitedEditionStyledNumberView value={uniqueLimitedSeriesSize} />
                    </div>
                </div>
            </Column>
        </Base>
    );
};