import PageLayout from '@/components/layout'
import {Link} from 'react-router-dom'
import type {RecordButtonType} from "@/types";
import {useState} from "react";
import {cn} from "@/lib";

function RecordPage() {

    const mockData = [
        {
            date: '2025-03-04  10:20',
            name: ' Bonus',
            content: 'Daily Rebate 50',
            status: 'Issued',
            points: '800'
        },
        {
            date: '2025-03-04  10:20',
            name: ' Bonus',
            content: 'Daily Rebate 50',
            status: 'Issued',
            points: '800'
        },
        {
            date: '2025-03-04  10:20',
            name: ' Bonus',
            content: 'Daily Rebate 50',
            status: 'Issued',
            points: '800'
        },
        {
            date: '2025-03-04  10:20',
            name: ' Bonus',
            content: 'Daily Rebate 50',
            status: 'Issued',
            points: '800'
        }
    ]

    const [btnType, setBtnType] = useState<RecordButtonType>('record')


    return (
        <PageLayout contentClassName="min-h-screen">
            <Link
                to="/"
                className={'relative text-[#F56E10] flex h-[40px] w-full items-center justify-center bg-[#08070E]/70'}
            >
                <div className={'absolute left-[16px]'}> &lt; </div>
                <div>Record</div>
            </Link>

            <div className={'w-[60%] mx-auto'}>
                <div>
                    <div className={'flex gap-[10px] my-[15px]'}>
                        <div
                            className={cn('cursor-pointer text-[#B2ADAA] border-1 border-[#B2ADAA] rounded-[10px] p-[5px]', {
                                'text-[#ffffff] bg-[#FA6A00]': btnType === 'order',
                            })}
                            onClick={() => setBtnType('order')}
                        >My Orders
                        </div>
                        <div
                            className={cn('cursor-pointer text-[#B2ADAA] border-1 border-[#B2ADAA] rounded-[10px] p-[5px]', {
                                'text-[#ffffff] bg-[#FA6A00] border-[#FA6A00]': btnType === 'record',
                            })}
                            onClick={() => setBtnType('record')}
                        >Points Record
                        </div>
                    </div>
                    <hr className={'text-[#A4A4A4] border-[1px]'}></hr>
                </div>
                <div className={'flex flex-col mt-[10px]'}>
                    {
                        mockData.map((item, index) => (
                            <div key={index} className={'flex flex-col my-[10px]'}>
                                <div
                                    className={'bg-linear-to-r from-[#F96C02] to-[#FE9F00] rounded-t-[10px] py-[5px] px-[10px]'}>{item.date} - {item.name}  </div>
                                <div
                                    className={'liquid-glass-bg !rounded-t-none px-[10px] py-[10px] pr-[20px] flex items-center justify-between'}>
                                    <div className={'flex flex-col'}>
                                        <div>{item.content}</div>
                                        <div className={'text-[#FA6A00]'}>Check the Detail</div>
                                    </div>
                                    <div className={'flex flex-col items-end'}>
                                        <div>{item.status}</div>
                                        <div>{item.points}</div>
                                    </div>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>
        </PageLayout>
    )
}

export default RecordPage;
