import React from "react";
import { styled } from "@mui/material";

const StatusIndicator = styled('div')(({ theme, status }) => ({
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: '4px',
    backgroundColor: getStatusColor(status),
    borderRadius: '0 2px 2px 0',
    transition: 'background-color 0.3s ease'
}));

const getStatusColor = (status) => {
    switch (status) {
        case 'red': return '#F44336';
        case 'orange': return '#FF9800';
        case 'yellow': return '#cebd21';
        case 'green': return '#4CAF50';
        default: return 'transparent';
    }
};

export default StatusIndicator;