import React from 'react';
import {
  SyncAlt,
  Favorite,
  Settings,
  Info,
  Search,
  AutoFixHigh,
  Image,
  Psychology,
  Build,
} from '@mui/icons-material';
import { styled } from '@mui/material/styles';
import * as Types from 'types/types';
import { Box } from '@mui/material';

interface StatusIconProps {
  type: Types.ApiActivityType;
}

const StatusBox = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  gap: theme.spacing(1),
  padding: theme.spacing(1, 2),
  backgroundColor: theme.palette.background.paper,
  borderRadius: theme.shape.borderRadius,
  border: `1px solid ${theme.palette.divider}`,
  minHeight: 48,
}));

const StatusIcon = (props: StatusIconProps) => {
  const { type } = props;

  switch (type) {
    case 'converting':
      return <SyncAlt color="primary" />;
    case 'heartbeat':
      return <Favorite color="error" />;
    case 'system':
      return <Settings color="action" />;
    case 'info':
      return <Info color="info" />;
    case 'searching':
      return <Search color="primary" />;
    case 'generating':
      return <AutoFixHigh color="secondary" />;
    case 'generating_image':
      return <Image color="primary" />;
    case 'thinking':
      return <Psychology color="secondary" />;
    case 'tooling':
      return <Build color="action" />;
    default:
      return <Info color="action" />;
  }
};

export { StatusIcon, StatusBox };