import PageLayout from '@/components/layout'
import BorderlessTable, { type TableColumn } from '@/components/table'
import { Link } from 'react-router-dom'

type AccountTableRow = {
    name: string
    phone: string
    address: string
    code: string
    action: string
    setting: string
}

function AccountPage() {
    const columns: TableColumn<AccountTableRow>[] = [
        {
            label: 'Name',
            key: 'name',
            render: (value: string) => <div>{value}</div>
        },
        {
            label: 'Phone / Mobile',
            key: 'phone',
            render: (value: string) => <div>{value}</div>
        },
        {
            label: 'Address',
            key: 'address',
            render: (value: string) => <div>{value}</div>
        },
        {
            label: 'Postal Code',
            key: 'code',
            render: (value: string) => <div>{value}</div>
        },
        {
            label: 'Action',
            key: 'action',
            render: (value: string) => <div>{value}</div>
        },
        {
            label: 'Default Setting',
            key: 'setting',
            render: (value: string) => <div>{value}</div>
        }
    ]

    const dataSource: AccountTableRow[] = [
        {
            name: 'Jia Jun',
            phone: '+86 138 0000 1288',
            address: 'No. 88 Century Avenue, Pudong New Area, Shanghai',
            code: '200120',
            action: 'Edit',
            setting: 'Default',
        },
        {
            name: 'Alicia Tan',
            phone: '+65 9123 4567',
            address: '18 Robinson Road, Singapore',
            code: '048547',
            action: 'Edit',
            setting: 'Optional',
        },
        {
            name: 'Marcus Lee',
            phone: '+60 12 778 9911',
            address: '27 Jalan Bukit Bintang, Kuala Lumpur',
            code: '55100',
            action: 'Edit',
            setting: 'Optional',
        },
    ]

    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>Account</div>
            </Link>

            <div className={'mt-[20px] w-full flex items-center justify-center'}>

                <div className={'w-[80%]'}>
                    <div className={'w-full mb-[10px] flex items-center justify-between'}>
                        <div>My Shipping Address</div>
                        <div className={'liquid-glass-bg px-[10px] py-[5px] text-sm'}>Add Address</div>
                    </div>

                    <BorderlessTable columns={columns} dataSource={dataSource} />
                </div>
            </div>
        </PageLayout>
    )
}

export default AccountPage
