import type { Person, Settlement } from '@splint/shared';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Item, ItemContent, ItemTitle } from '@/components/ui/item';

interface SettlementsListProps {
  settlements: Settlement[];
  people: Person[];
}

export function SettlementsList({ settlements, people }: SettlementsListProps) {
  return (
    <Card className={settlements.length > 0 ? 'ring-amber-500' : ''}>
      <CardHeader>
        <CardTitle>Pending Settlements</CardTitle>
      </CardHeader>
      <CardContent>
        {settlements.length === 0 ? (
          <p className="text-xs text-muted-foreground py-4">Everyone is settled up!</p>
        ) : (
          <div role="list">
            {settlements.map((s, i) => {
              const from = people.find((p) => p.id === s.from);
              const to = people.find((p) => p.id === s.to);
              return (
                <Item key={i} variant="outline" size="xs" role="listitem">
                  <ItemContent>
                    <ItemTitle>
                      <span>{from?.name ?? '?'} → {to?.name ?? '?'}</span>
                      <span className="text-primary font-medium shrink-0 ml-auto">${(s.amount / 100).toFixed(2)}</span>
                    </ItemTitle>
                  </ItemContent>
                </Item>
              );
            })}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
