import { memo } from 'react';
import { Modal, Divider, Descriptions } from 'antd';

const DetailEventAlarm = memo(function DetailEventAlarm({ visible, onCancel, selectedData }) {
    return (
        <Modal
            title="Detail Event Alarm"
            open={visible}
            onCancel={onCancel}
            onOk={onCancel}
            okText="Tutup"
            cancelButtonProps={{ style: { display: 'none' } }}
            width={700}
        >
            {selectedData && (
                <div>
                    <Descriptions bordered column={2}>
                        <Descriptions.Item label="Tanggal" span={2}>
                            {selectedData.tanggal}
                        </Descriptions.Item>
                        <Descriptions.Item label="Plant Sub Section" span={2}>
                            {selectedData.plant_sub_section}
                        </Descriptions.Item>
                        <Descriptions.Item label="Device">
                            {selectedData.device}
                        </Descriptions.Item>
                        <Descriptions.Item label="Tag">
                            {selectedData.tag}
                        </Descriptions.Item>
                        <Descriptions.Item label="Engineer" span={2}>
                            {selectedData.engineer}
                        </Descriptions.Item>
                    </Descriptions>

                    <Divider style={{ margin: '16px 0' }} />

                    {/* Additional Info */}
                    <div
                        style={{
                            marginTop: '16px',
                            padding: '12px',
                            backgroundColor: '#f6f9ff',
                            borderRadius: '6px',
                            border: '1px solid #d6e4ff',
                        }}
                    >
                        <div style={{ fontSize: '12px', color: '#595959' }}>
                            <strong>Catatan:</strong> Event alarm ini telah tercatat dalam sistem untuk
                            monitoring dan analisis lebih lanjut.
                        </div>
                    </div>
                </div>
            )}
        </Modal>
    );
});

export default DetailEventAlarm;