Source: components/AcceptTrade.jsx

/** ========= REACT ========= */
import { useState } from 'react';

/** ========= MUI ========= */
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';

/** ========= MISC ========= */
import { useAuth } from '../contexts/useAuth';
import { useFeedback } from '../contexts/useFeedback';
import { updateTrade } from '../data/FirestoreMethods';
import { capitalize } from '../data/Functions';
import { Trade } from '../data/Schemas';
import { useNavigate } from 'react-router-dom';

/**
 * @param {{ trade: Trade }} param0
 */
const TradeCard = ({ trade }) => {
	const { setFeedback } = useFeedback();
	const { user } = useAuth();
	const navigate = useNavigate();
	const [status, setStatus] = useState(trade.tradeStatus);
	if (!user) return;
	const AcceptTrade = async () => {
		await updateTrade(trade, user);
		setStatus(trade.tradeStatus);
		setFeedback('Trade status updated!', 'success');
	};

	return (
		<Card
			elevation={6}
			sx={{
				margin: 2,
				padding: 2,
				textAlign: 'left',
				borderRadius: 3,
				backgroundColor: 'rgba(0,0,0,0.65)',
				color: 'white',
				border: '1px solid rgba(255,255,255,0.15)',
				boxShadow: '0 6px 20px rgba(0,0,0,0.4)',
				backdropFilter: 'blur(4px)',
			}}
		>
			<CardHeader
				title={`Looking for: ${trade.requestedSkill}`}
				sx={{ color: 'white' }}
			/>

			<CardContent>
				<p>
					<strong>Offering:</strong> {trade.offeredSkill}
				</p>
				<p>{trade.message}</p>
				<p>
					<strong>Status:</strong> {capitalize(status)}
				</p>
			</CardContent>

			<CardActions>
				{trade.tradeStatus === 'pending' ? (
					<Button
						variant="contained"
						disabled={trade.offererId == user.uid}
						color="success"
						onClick={AcceptTrade}
						sx={{
							textTransform: 'none',
							fontWeight: 'bold',
							borderRadius: 2,
							px: 3,
						}}
					>
						Accept Trade
					</Button>
				) : (
					<>
						<Button
							variant="outlined"
							color="error"
							onClick={AcceptTrade}
							sx={{
								textTransform: 'none',
								fontWeight: 'bold',
								borderRadius: 2,
								px: 3,
								borderColor: 'rgba(255,255,255,0.4)',
							}}
						>
							Cancel
						</Button>
						<Button
							variant="contained"
							color="success"
							onClick={() => navigate(`/trade/${trade.id}`)}
							sx={{
								textTransform: 'none',
								fontWeight: 'bold',
								borderRadius: 2,
								px: 3,
								borderColor: 'rgba(255,255,255,0.4)',
							}}
						>
							View Trade
						</Button>
					</>
				)}
			</CardActions>
		</Card>
	);
};

export default TradeCard;