/* AUTO-CONVERTED TO TypeScript (best-effort)
   - Please review and replace 'any' / 'React.FC<any>' with precise types.
   - CSS modules are preserved; ensure your project has declarations for .module.scss files.
*/

import React from 'react';
import styles from "./customers-widget.module.scss"
import PageIntro from "../page-intro"
import avatar from "../../../../images/avatar.svg"

const TopCustomerWidget = () => {
    const customers = [
        {
            id: 1, 
            name: "Paradise Usuoyibo", 
            phone: "08103749387", 
            value: 350000
        }, 
        {
            id: 2, 
            name: "Ajirioghene Julius", 
            phone: "08103749387", 
            value: 250000
        }, 
        {
            id: 3, 
            name: "Anointing Jinojah", 
            phone: "08103749387", 
            value: 150000
        }, 
        {
            id: 4, 
            name: "Efe Richard", 
            phone: "08103749387", 
            value: 100000
        }, 
        {
            id: 5, 
            name: "James Smith", 
            phone: "08103749387", 
            value: 50000
        }, 
    ]
  return (
    <div className={ styles["top__customers"] }>
        <div className={ styles["top__customers--header"] }> 
            <PageIntro 
                title={"Top Buying Customers"}
                description={"See your best purchasing customers at a glance"}
            />
        </div>
        <div className={ styles["top__customers--customers"] }>
            { customers?.map((customer) => (
                <div className={ styles["top__customers--customers--customers--item"] }>
                    {/* <img src={avatar} alt="user avatar" /> */}
                    <div className={ styles["top__customers--customers--customers--item--profile"] }>
                        <h5>{ customer?.name }</h5>
                        <p>{ customer?.phone }</p>
                    </div>
                    <h4>&#8358;{ Number(customer?.value).toLocaleString("en-US") }</h4>
                </div>
            )) }
        </div>
    </div>
  )
}

const Index: React.FC= TopCustomerWidget

export default Index;