import React from 'react';
import { Table, Button, Space } from 'antd';
import { EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

const ErrorCodeTable = ({
    errorCodes,
    loading,
    onPreview,
    onEdit,
    onDelete,
    onFileView
}) => {
    const errorCodeColumns = [
        { title: 'Error Code', dataIndex: 'error_code', key: 'error_code' },
        { title: 'Error Code Name', dataIndex: 'error_code_name', key: 'error_code_name' },
        {
            title: 'Solutions',
            dataIndex: 'solution',
            key: 'solution',
            render: (solutions) => (
                <div>
                    {solutions && solutions.length > 0 ? (
                        solutions.map((sol, index) => (
                            <div key={index} style={{ marginBottom: 4 }}>
                                <span style={{ fontSize: '12px' }}>
                                    {sol.solution_name}
                                </span>
                            </div>
                        ))
                    ) : (
                        <span style={{ color: '#999', fontSize: '12px' }}>No solutions</span>
                    )}
                </div>
            )
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space>
                    <Button
                        type="text"
                        icon={<EyeOutlined />}
                        onClick={() => onPreview(record)}
                        style={{ color: '#1890ff', borderColor: '#1890ff' }}
                    />
                    <Button
                        type="text"
                        icon={<EditOutlined />}
                        onClick={() => onEdit(record)}
                        style={{ color: '#faad14', borderColor: '#faad14' }}
                    />
                    <Button
                        danger
                        type="text"
                        icon={<DeleteOutlined />}
                        onClick={() => onDelete(record.key)}
                        style={{ borderColor: '#ff4d4f' }}
                    />
                </Space>
            ),
        },
    ];

    const dataSource = loading
        ? Array.from({ length: 3 }, (_, index) => ({
            key: `loading-${index}`,
            error_code: 'Loading...',
            error_code_name: 'Loading...',
            solution: []
        }))
        : errorCodes;

    return (
        <Table
            columns={errorCodeColumns}
            dataSource={dataSource}
            rowKey="key"
            pagination={false}
        />
    );
};

export default ErrorCodeTable;