import React from 'react';
import {
    Box,
    Typography,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Paper,
    Button,
    Chip
} from '@mui/material';
// import LocalShippingIcon from '@mui/icons-material/LocalShipping';
// import InventoryIcon from '@mui/icons-material/Inventory';
// import AssignmentIcon from '@mui/icons-material/Assignment';

const RecentActivity = () => {
    // Sample data
    const activities = [
        {
            id: 1,
            order: 'Order #1234 completed',
            delivery: 'Delivery en route',
            inventory: 'Low stock on item #567'
        },
        {
            id: 2,
            order: 'Order #1235 completed',
            delivery: 'Delivery delayed',
            inventory: 'Low stock on item #890'
        },
        {
            id: 3,
            order: 'Order #1236 completed',
            delivery: 'Delivery arrived',
            inventory: 'Out of stock on item #123'
        }
    ];

    return (
        <Box sx={{ width: '93.5%', p: 3, backgroundColor: "white", borderRadius: 2, }}>
            <Typography variant="h5" gutterBottom sx={{ fontWeight: 600, fontSize: '20px', mb: 2 }}>
                Recent Activity
            </Typography>

            <TableContainer component={Paper} sx={{ boxShadow: 'none', border: '1px solid #e0e0e0', borderRadius: 2 }}>
                <Table sx={{ minWidth: 650 }} aria-label="recent activity table">
                    <TableHead sx={{ backgroundColor: '#f5f5f5', color: '#61677F' }}>

                        <TableRow sx={{ '& th': { borderBottom: 'none' } }}>
                            <TableCell sx={{ fontWeight: 500, fontSize: '16px', color: '#61677F' }}>New Orders</TableCell>
                            <TableCell sx={{ fontWeight: 500, fontSize: '16px', color: '#61677F' }}>Delivery Updates</TableCell>
                            <TableCell sx={{ fontWeight: 500, fontSize: '16px', color: '#61677F' }}>Inventory Alerts</TableCell>
                            <TableCell sx={{ fontWeight: 500, fontSize: '16px', color: '#61677F' }}>Actions</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {activities.map((activity) => (
                            <TableRow key={activity.id}>
                                <TableCell>
                                    <Box sx={{ display: 'flex', alignItems: 'center', color: '#4F5867', fontSize: '14px', fontWeight: 500 }}>
                                        {activity.order}
                                    </Box>
                                </TableCell>

                                <TableCell>
                                    <Box sx={{ display: 'flex', alignItems: 'center', color: '#4F5867', fontSize: '14px', fontWeight: 500 }}>
                                        {activity.delivery}
                                    </Box>
                                </TableCell>

                                <TableCell>
                                    <Box sx={{ display: 'flex', alignItems: 'center', color: '#4F5867', fontSize: '14px', fontWeight: 500 }}>
                                        {activity.inventory}
                                    </Box>
                                </TableCell>

                                <TableCell sx={{ width: '28%' }} >
                                    <Box sx={{ display: 'flex', gap: 1 }}>
                                        <Button
                                            sx={{ color: 'white', borderRadius: '8px', fontWeight: 600, fontSize: '14px', height: '40px', width: '135px', textTransform: 'none' }}
                                            variant="contained"
                                            size="small"
                                        >
                                            Record Inventory
                                        </Button>
                                        <Button
                                            sx={{ fontWeight: 600, fontSize: '14px', borderRadius: '8px', height: '40px', textTransform: 'none' }}
                                            variant="outlined"
                                            size="small"
                                        >
                                            Assign Task
                                        </Button>
                                    </Box>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </Box>
    );
};

export default RecentActivity;