import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';

export type CalculationDisplayLine = {
  key: string;
  label: string;
  value: string;
  valueClassName?: string;
};

export type CalculationDisplayProps = {
  title?: string;
  lines: CalculationDisplayLine[];
  totalLabel: string;
  totalValue: string;
  totalClassName?: string;
  className?: string;
};

export function CalculationDisplay({
  title,
  lines,
  totalLabel,
  totalValue,
  totalClassName,
  className,
}: CalculationDisplayProps) {
  return (
    <Card className={className}>
      {title ? (
        <CardHeader className="pb-2">
          <CardTitle className="text-sm">{title}</CardTitle>
        </CardHeader>
      ) : null}
      <CardContent className="space-y-2">
        {lines.map((line) => (
          <div key={line.key} className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground">{line.label}</span>
            <span className={cn('font-medium', line.valueClassName)}>{line.value}</span>
          </div>
        ))}

        <div className="border-t pt-2 flex items-center justify-between">
          <span className="text-sm font-semibold">{totalLabel}</span>
          <span className={cn('text-base font-bold', totalClassName)}>{totalValue}</span>
        </div>
      </CardContent>
    </Card>
  );
}