import React from 'react';

import { Card } from '@kit/ui/card';
import { cn } from '@kit/ui/utils';

import {
  NormStatus,
  getAccountHealthDetailsFields,
} from '../_lib/server/load-team-account-health-details';

const TeamAccountHealthDetails = () => {
  const accountHealthDetailsFields = getAccountHealthDetailsFields();
  return (
    <div className="grid flex-1 grid-cols-2 gap-4 md:grid-cols-3">
      {accountHealthDetailsFields.map(({ title, Icon, value, normStatus }) => (
        <Card className="relative p-4">
          <div
            className={cn('absolute top-2 right-2 rounded-2xl p-2', {
              'bg-success': normStatus === NormStatus.NORMAL,
              'bg-warning': normStatus === NormStatus.WARNING,
              'bg-destructive': normStatus === NormStatus.CRITICAL,
            })}
          >
            <Icon color="white" className="stroke-2" />
          </div>
          <h5 className="mt-8 leading-none">{title}</h5>
          <span className="text-muted-foreground text-xs">{value}</span>
        </Card>
      ))}
    </div>
  );
};

export default TeamAccountHealthDetails;