import React from 'react';

import { Database } from '@/packages/supabase/src/database.types';

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

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

const TeamAccountHealthDetails = ({
  memberParams,
  bmiThresholds,
  members,
}: {
  memberParams: TeamAccountStatisticsProps['memberParams'];
  bmiThresholds: Omit<
    Database['medreport']['Tables']['bmi_thresholds']['Row'],
    'id'
  >[];
  members: Database['medreport']['Functions']['get_account_members']['Returns'];
}) => {
  const accountHealthDetailsFields = getAccountHealthDetailsFields(
    memberParams,
    bmiThresholds,
    members,
  );
  return (
    <div className="grid flex-1 grid-cols-2 gap-4 md:grid-cols-3">
      {accountHealthDetailsFields.map(({ title, Icon, value, iconBg }) => (
        <Card className="relative p-4" key={title}>
          <div className={cn('absolute top-2 right-2 rounded-2xl p-2', iconBg)}>
            <Icon color="white" className="stroke-2" />
          </div>
          <h5 className="mt-8 leading-none">
            <Trans i18nKey={title} />
          </h5>
          <span className="text-muted-foreground text-xs">{value}</span>
        </Card>
      ))}
    </div>
  );
};

export default TeamAccountHealthDetails;