import { Card } from "@/components/ui/Card";
import { Text } from "@/components/ui/Text";
import { colors } from "@/lib/theme";
import { formatETB } from "@/lib/utils";

export function EntitlementSplitCard({
  orgName,
  planName,
  remainingAllowance,
  covered,
  selfPay,
}: {
  orgName: string;
  planName: string;
  remainingAllowance: number;
  covered: number;
  selfPay: number;
}) {
  return (
    <Card tone="brand" elevated={false}>
      <Text variant="h3">Corporate split · {orgName}</Text>
      <Text variant="bodySm" color={colors.muted} style={{ marginTop: 6 }}>
        Plan {planName} · {formatETB(remainingAllowance)} left this month
      </Text>
      <Text variant="bodySm" style={{ marginTop: 8 }}>
        Covered: {formatETB(covered)}
      </Text>
      <Text variant="bodySm">You pay: {formatETB(selfPay)}</Text>
    </Card>
  );
}