import Tabs from "@/app/component/Tabs";

const listTab = ["همه", "در انتظار", "پرداخت شده", "لغو شده"];

function Head({ status, setStatus }) {
    const statusMap = {
        0: undefined, // all
        1: "pending",
        2: "received",
        3: "canceled",
    };

    const handleChange = (e, value) => {
        setStatus(statusMap[value]);
    };

    const getCurrentIndex = () => {
        const entries = Object.entries(statusMap);
        const found = entries.find(([_, val]) => val === status);
        return found ? parseInt(found[0]) : 0;
    };

    return (
        <div className="flex items-center justify-start mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
            <div className="block w-full">
                <Tabs
                    style={{
                        ".MuiTabs-indicator": {
                            height: "2px",
                            borderRadius: "16px",
                            background: "#5559CE",
                        },
                        "& .MuiButtonBase-root": {
                            color: "#7E7E7E",
                            fontSize: "14px",
                            fontStyle: "normal",
                            fontWeight: "700",
                        },
                        "& .MuiTabs-flexContainer": {
                            paddingRight: "15px",
                            paddingLeft: "15px",
                        },
                        "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
                            color: "#5559CE !important",
                        },
                        "& .MuiButtonBase-root.Mui-selected": {
                            color: "#5559CE !important",
                        },
                    }}
                    color="#5559CE"
                    listTab={listTab}
                    value={getCurrentIndex()}
                    handleChange={handleChange}
                />
            </div>
        </div>
    );
}

export default Head;