import { useContext } from 'react';

import { Bin } from '@/app/lib/bin.enum';
import { DetailsForm } from '../DetailsForm/DetailsForm';
import { BinnerContext } from '../../context/BinnerContext';

import styles from './DefectPanel.module.scss';

export function DefectPanel() {
    const { bin, setBin } = useContext(BinnerContext);

    if (bin === null) {
        return;
    }

    return (
        <div className={styles.defectPanel}>
            <header className={styles.defectHeader}>
                <button onClick={() => setBin(null)} aria-label="Press Escape to go back">&times;</button>
                <span><strong>{Bin[bin]} Bin</strong></span>
            </header>
            <DetailsForm />
        </div>
    );
}

