Untitled

import React from 'react'
import { CloseOutlined, Grading, PersonOutlined, ShoppingCartOutlined, Warehouse } from '@mui/icons-material';
import "../widget/widget.scss"
import { useState } from 'react';
import { AnimateSharedLayout } from 'framer-motion';

const Widget =({type}) => {
    let data;
    //temporary
    const [expanded, setExpanded]= useState(false);
    //const diff =20;
    switch(type){
        case "BestSeller":
            data={
                amount:10,
                title:"Best Seller",
                isMoney:false,
                link:"View Best Seller items",
                icon:<PersonOutlined className="icon" style={{color:"white", backgroundColor:"green",}}/>,
            };
            break;
        case "lowstock":
            data={
                amount:20,
                title:"Low Stock",
                isMoney:false,
                link:"View Low stock item ",
                icon:<ShoppingCartOutlined className="icon" style={{color:"white", backgroundColor:"maroon",}}/>,

            };
            break;
        case "instock":
            data={
                amount:30,
                title:"In Stock",
                isMoney:true,
                link:"View purchased order",
                icon:<Warehouse className="icon" style={{color:"white", backgroundColor:"green",}}/>,
            };
            break;
        case "out":
            data={
                amount:40,
                title:"Out",
                isMoney:true,
                link:"View sales order",
                icon:<Grading className="icon" style={{color:"white", backgroundColor:"grey",}}/>,

            };
            break;
        default:
            break;
    }
    return (
        expanded
            ? <ExpandedCard param={data} setExpanded={()=>setExpanded(false)}/>
            : <CompactCard param={data} setExpanded={()=>setExpanded(true)}/>
    );
};

//compactCard
function CompactCard ({param, setExpanded}){
    return(
        <div className="widget" onClick={setExpanded} layoutId={`card-${param.title}`}>
            <div className="left">
                <span className="title">{param.title}</span>
                <span className="counter">{param.isMoney && "$"}{param.amount}</span>
                <span className="link">{param.link}</span>
            </div>
            <div className="right">
                {/*<div className="percentage positive">
                <KeyboardArrowUp/>
                {diff}%
            </div>*/}
                {param.icon}
            </div>
        </div>

    )
}
//expandedCard
function ExpandedCard ({param,setExpanded}){
    return(

        <div className="ExpandedCard" layoutId={`card-${param.title}`}>
            <div>
                <CloseOutlined onClick={setExpanded}/>
            </div>
            <span>{param.title}</span>

        </div>
    )
}


export default Widget