import React from 'react';
import { Card, Button, Row, Col, Typography, Space, Tag } from 'antd';
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';

const { Text } = Typography;

const CardDevice = ({ data, showPreviewModal, showEditModal, showDeleteDialog }) => {
    const getCardStyle = () => {
        const color = '#FF8C42'; // Orange color
        return {
            border: `2px solid ${color}`,
            borderRadius: '8px',
            textAlign: 'center' // Center text
        };
    };

    const getTitleStyle = () => {
        const backgroundColor = '#FF8C42'; // Orange color
        return {
            backgroundColor,
            color: '#fff',
            padding: '2px 8px',
            borderRadius: '4px',
            display: 'inline-block',
        };
    };

    return (
        <Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'center' }}>
            {data.map((item) => (
                <Col xs={24} sm={12} md={8} lg={6} key={item.device_id}>
                    <Card
                        title={
                            <span style={getTitleStyle()}>
                                {item.device_name}
                            </span>
                        }
                        style={getCardStyle()}
                        actions={[
                            <Space size="middle" style={{ display: 'flex', justifyContent: 'center' }}>
                                <Button
                                    type="text"
                                    style={{ color: '#1890ff' }}
                                    icon={<EyeOutlined />}
                                    onClick={() => showPreviewModal(item)}
                                />
                                <Button
                                    type="text"
                                    style={{ color: '#faad14' }}
                                    icon={<EditOutlined />}
                                    onClick={() => showEditModal(item)}
                                />
                                <Button
                                    type="text"
                                    danger
                                    icon={<DeleteOutlined />}
                                    onClick={() => showDeleteDialog(item)}
                                />
                            </Space>,
                        ]}
                    >
                        <p>
                            <Text strong>Code:</Text> {item.device_code}
                        </p>
                        <p>
                            <Text strong>Location:</Text> {item.device_location}
                        </p>
                        <p>
                            <Text strong>IP Address:</Text> {item.ip_address}
                        </p>
                        <p>
                            <Text strong>Status:</Text>{' '}
                            <Tag color={item.device_status ? 'green' : 'red'}>
                                {item.device_status ? 'Running' : 'Offline'}
                            </Tag>
                        </p>
                    </Card>
                </Col>
            ))}
        </Row>
    );
};

export default CardDevice;