"use client";
import { RecordBillsResp } from "@/api/betrecord";
import { timeFormat } from "@/utils/methods";
import { List } from "antd-mobile";
import { useLocale } from "next-intl";
import { FC } from "react";

interface Props {
    record: RecordBillsResp[];
}

const BetRecord: FC<Props> = (props) => {
    const { record } = props;
    const locale = useLocale();

    return (
        <>
            <List
                style={{
                    "--border-bottom": "none",
                    "--border-top": "none",
                    "--border-inner": "solid 1px #333333",
                }}
            >
                {record.map((item, index) => (
                    <List.Item key={index}>
                        <div className={"flex justify-between"}>
                            <div className={"text-[#999]"}>{item.product}</div>
                            <div>
                                {item.reward > 0 ? (
                                    <span className={"text-[green]"}>+ {item.reward}</span>
                                ) : (
                                    <span className={"text-[red]"}>LOST</span>
                                )}
                            </div>
                        </div>

                        <div
                            className={
                                "flex justify-between text-[0.10rem] text-[#999]" + " mt-[0.02rem]"
                            }
                        >
                            <div>
                                Bet: <span>{item.bet}</span>
                            </div>
                            <div>{timeFormat(item.created_at!, locale)}</div>
                        </div>
                    </List.Item>
                ))}
            </List>
        </>
    );
};

export default BetRecord;
