import { Card, Badge, Button } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';

interface ServiceStatusCardProps {
  name: string;
  online: boolean;
  url: string;
  icon: React.ReactNode;
}

export function ServiceStatusCard({ name, online, url, icon }: ServiceStatusCardProps) {
  return (
    <Card size="small">
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ fontSize: 24 }}>{icon}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 500, marginBottom: 4 }}>{name}</div>
          <Badge
            status={online ? 'success' : 'error'}
            text={online ? 'Online' : 'Offline'}
          />
        </div>
        <Button
          type="link"
          href={url}
          target="_blank"
          disabled={!online}
          icon={online ? <CheckCircleOutlined /> : <CloseCircleOutlined />}
        >
          {online ? 'Open' : 'Offline'}
        </Button>
      </div>
    </Card>
  );
}
