import React from 'react';
import {
  Typography,
  Box,
  Chip,
} from '@mui/material';
import { SvgIconComponent } from '@mui/icons-material';
import { WidgetCard } from '../templates/WidgetCard';

interface ServiceCardProps {
  title: string;
  description: string;
  icon: SvgIconComponent;
  status: 'connected' | 'disconnected';
  onClick?: () => void;
}

const ServiceCard: React.FC<ServiceCardProps> = ({
  title,
  description,
  icon: Icon,
  status,
  onClick,
}) => {
  const isConnected = status === 'connected';

  return (
    <WidgetCard
      title={title}
      icon={
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            bgcolor: isConnected ? 'success.light' : 'grey.300',
            borderRadius: '50%',
            p: 1,
          }}
        >
          <Icon
            sx={{
              fontSize: 24,
              color: isConnected ? 'success.dark' : 'grey.600',
            }}
          />
        </Box>
      }
      action={
        <Box
          sx={{
            width: 12,
            height: 12,
            borderRadius: '50%',
            bgcolor: isConnected ? 'success.main' : 'grey.400',
          }}
        />
      }
      onClick={onClick}
    >
      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
        {description}
      </Typography>

      <Chip
        label={isConnected ? 'Verbunden' : 'Noch nicht konfiguriert'}
        size="small"
        color={isConnected ? 'success' : 'default'}
        variant={isConnected ? 'filled' : 'outlined'}
      />
    </WidgetCard>
  );
};

export default ServiceCard;
