import {Link} from 'react-router-dom'
import Icons from "../Icons";

export default function CustomerAccountView({accountInfo}) {
    return <>
        <div className="pb-5">
            <div className="flex flex-col gap-1">
                <div className="w-full">
                    <h4 className="font-semibold text-lg">Account Info</h4>
                </div>
                <div className="w-full overflow-x-auto">
                    <>
                        <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
                            <thead className="py-2 text-sm text-slate-500 text-left">
                            <tr>

                                <th scope="col" className="px-2 py-2">
                                    Firstname
                                </th>
                                <th scope="col" className="px-2">
                                    Lastname
                                </th>
                                <th scope="col" className="px-2">
                                    Username
                                </th>
                                <th scope="col" className="px-2">
                                    Email
                                </th>

                                <th scope="col" className="px-2 text-right">
                                    Action
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {(accountInfo && Object.keys(accountInfo).length > 0) ? 
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    {/*<td className="px-2 py-2">*/}
                                    {/*    <div className="text-left">*/}
                                    {/*        <div className="text-base font-semibold">{1}</div>*/}
                                    {/*    </div>*/}
                                    {/*</td>*/}
                                    <td className="px-2">
                                        <div className="text-left">
                                            <div className="text-base font-semibold">{accountInfo?.firstname}</div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            <div className="text-base font-semibold">{accountInfo?.lastname}</div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            <div className="text-base font-semibold">{accountInfo?.username}</div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            <div className="text-base font-semibold">{accountInfo?.email}</div>
                                        </div>
                                    </td>

                                    <td className="px-2 text-right">
                                        <div className='flex items-center justify-end gap-3 md:gap-4'>
                                            <div
                                                className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
                                                <Link 
                                                    // to={`/subscription-view/63554d40-9ba1-4afe-80c2-ca147236f7ee`}
                                                >
                                                    <Icons name='eye'/>
                                                </Link>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                :
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-3 py-2" colSpan={6}>
                                        <div className="flex justify-center items-center">
                                            No Record Found
                                        </div>
                                    </td>
                                </tr>
                            }
                            </tbody>
                        </table>
                    </>
                </div>
            </div>
        </div>
    </>
}