import React from 'react';
import { Section } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { formatToMonthDayYear } from 'src/utils/date-helpers';

const renderLastEditDateLabel = (date?: string | Date): string | undefined => {
    const formatted = formatToMonthDayYear(date);
    return formatted && `Last Edit Date: ${formatted}`;
};

interface PaymentSectionHeaderProps {
    title: string;
    lastModified?: string | Date;
    showSuccessGlyph?: boolean;
    className?: string;
}

export const PaymentDetailSectionHeader: React.FC<
    PaymentSectionHeaderProps
> = ({ title, lastModified, showSuccessGlyph = false, className }) => {
    return (
        <Section.Header className={className}>
            <div className="title-wrapper">
                <div className={cx({ 'd-flex': showSuccessGlyph })}>
                    {showSuccessGlyph && (
                        <div className="circle-with-glyph success">
                            <GlyphIcon name="check" size={12} />
                        </div>
                    )}

                    <div
                        className={cx({
                            'section-title__wrapper': showSuccessGlyph,
                        })}
                    >
                        <Section.Title
                            className={cx({
                                'section-title': showSuccessGlyph,
                            })}
                        >
                            {title}
                        </Section.Title>

                        {lastModified && (
                            <div className="last-edit-date suite-text-small">
                                {renderLastEditDateLabel(lastModified)}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </Section.Header>
    );
};