import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Banknote } from "lucide-react";

export function CashFlowWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const cashFlow = {
    opening: 1800000000,
    closing: 2100000000
  };
  
  const majorTransactions = [
    { description: 'A전자 수금', time: '10:30', amount: 85000000 },
    { description: 'B산업 원자재 매입', time: '11:45', amount: -42000000 },
    { description: 'C건설 수금', time: '14:20', amount: 125000000 },
    { description: '급여 지급', time: '15:00', amount: -68000000 }
  ];

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader>
        <CardTitle className="flex items-center space-x-3">
          <div className="w-6 h-6 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
            <Banknote className="h-4 w-4 text-green-600 dark:text-green-400" />
          </div>
          <span>현금 흐름 및 주요 거래</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="p-3 bg-green-50 dark:bg-green-950/20 rounded-lg">
              <p className="text-sm text-muted-foreground">기초잔고</p>
              <p className="text-lg">{Math.round(cashFlow.opening / 100000000)}억원</p>
            </div>
            <div className="p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
              <p className="text-sm text-muted-foreground">기말잔고</p>
              <p className="text-lg">{Math.round(cashFlow.closing / 100000000)}억원</p>
            </div>
          </div>
          <div className="space-y-2">
            <h4 className="font-medium text-foreground">주요 수입/지출 내역</h4>
            {majorTransactions.map((transaction: any, index: number) => (
              <div key={index} className="flex justify-between items-center p-3 bg-muted/50 dark:bg-muted/20 rounded-lg">
                <div>
                  <p className="font-medium text-foreground">{transaction.description}</p>
                  <p className="text-sm text-muted-foreground">{transaction.time}</p>
                </div>
                <p className={`${transaction.amount > 0 ? 'text-green-600' : 'text-red-600'}`}>
                  {transaction.amount.toLocaleString()}원
                </p>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
