coffee-ts/components/cards/order-card/OrderCard.tsx

import { Card, Divider, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { useTranslation } from 'next-i18next';
import { OrderCard } from '../../../utils/interface/orderInterface';

interface OrderCardProps {
    data: OrderCard;
}

const OrderCard: React.FC<OrderCardProps> = ({ data }) => {
    const { t } = useTranslation('profile');
    return (
        <Card
            sx={{
                backgroundColor: '#f2f2f2',
                mb: 2,
                p: 2,
                mx: { xs: 0, sm: 1 },
                width: { xs: '100%', sm: '47%', md: '100%', lg: '100%' },
                height: "100%"
            }}
        >
            <Box
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: { xs: 'center', md: 'flex-start' },
                }}
            >
                <Typography sx={{ fontWeight: 600 }}>
                    <>
                        {t('profile:orderDate')}
                        {data.date}
                    </>
                </Typography>
                <Divider />
                <Typography sx={{ mt: 1 }}>
                    {t('profile:by')}
                    {data.name}
                </Typography>
                <Typography>
                    {t('profile:total')}
                    {data.totalPrice.toFixed(2)}
                </Typography>
            </Box>
        </Card>
    );
};


export default OrderCard;