chciałabym aby ten komponent w pełni korzystał z kontekstu i nie używał dropsów pomóż mi go przerobić: import React, { type ChangeEvent, type FormEvent } from 'react';
import { Container, Form, Row, Col, Card, Spinner } from 'react-bootstrap';
import { useCalculationContext } from '../../contexts/calculationContext.tsx';
import type { ExtendedProfileState } from './types';

type ProfileUserProps = {
    state: ExtendedProfileState;
    handleChange: (field: string, e: ChangeEvent<any>) => void;
    handleSubmit: (e: FormEvent<any>) => void;
    currencyOptions: string[];
    loadingCountries: boolean;
    countryToLocale: Record<string, string>;
};

export const ProfileUser: React.FC<ProfileUserProps> = ({
                                                            state,
                                                            handleChange,
                                                            handleSubmit,
                                                            currencyOptions,
                                                            loadingCountries,
                                                        }) => {
    const { currency, locale} = useCalculationContext();
    
    const calculationNumbers = ['Calc #1', 'Calc #2', 'Calc #3'];

    return (
        <Container className="profileUser d-flex py-3 mb-2 mt-2">
            <Card bg="success" border="light" text="light" className="w-100 shadow-sm">
                <Card.Header as="h4" className="text-center mb-2">Profile User</Card.Header>
                <Card.Subtitle className="text-center mb-3">Please set your settings:</Card.Subtitle>
                <Card.Body>
                    <Form className="px-2" onSubmit={handleSubmit}>
                        <Form.Group as={Row} controlId="Name" className="mb-3">
                            <Form.Label column xs={4}>User:</Form.Label>
                            <Col xs={8}>
                                <Form.Control
                                    size="sm"
                                    type="text"
                                    placeholder="Enter your name"
                                    value={state.name}
                                    isInvalid={!!state.errors.name}
                                    onChange={e => handleChange('name', e)}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {state.errors.name}
                                </Form.Control.Feedback>
                            </Col>
                        </Form.Group>

                        <Form.Group as={Row} controlId="CalculationNumber" className="mb-2 align-items-center">
                            <Form.Label column xs={6}>Calculation nr:</Form.Label>
                            <Col xs={6}>
                                <Form.Select
                                    size="sm"
                                    value={state.calcNumber}
                                    isInvalid={!!state.errors.calcNumber}
                                    onChange={e => handleChange('calcNumber', e)}
                                >
                                    <option value="">--Select--</option>
                                    {calculationNumbers.map(num => (
                                        <option key={num} value={num}>{num}</option>
                                    ))}
                                </Form.Select>
                                <Form.Control.Feedback type="invalid">
                                    {state.errors.calcNumber}
                                </Form.Control.Feedback>
                            </Col>
                        </Form.Group>

                        <Form.Group as={Row} controlId="Country" className="mb-2 align-items-center">
                            <Form.Label column xs={6}>Country:</Form.Label>
                            <Col xs={6} className="d-flex align-items-center">
                                <Form.Select
                                    size="sm"
                                    value={state.country}
                                    isInvalid={!!state.errors.country}
                                    onChange={e => handleChange('country', e)}
                                    disabled={loadingCountries}
                                >
                                    <option value="">{loadingCountries ? 'Loading countries...' : '--Select--'}</option>
                                    {state.countriesList.map(country => (
                                        <option key={country.cca2} value={country.cca2}>
                                            {country.name}
                                        </option>
                                    ))}
                                </Form.Select>
                                {loadingCountries && <Spinner animation="border" size="sm" className="ms-2" />}
                                <Form.Control.Feedback type="invalid">
                                    {state.errors.country}
                                </Form.Control.Feedback>
                            </Col>
                        </Form.Group>

                        <Form.Group as={Row} controlId="Currency" className="mb-2 align-items-center">
                            <Form.Label column xs={6}>Currency:</Form.Label>
                            <Col xs={6}>
                                <Form.Select
                                    size="sm"
                                    value={state.currency}
                                    isInvalid={!!state.errors.currency}

                                    onChange={e => handleChange('currency', e)}
                                >
                                    <option value="">--Select--</option>
                                    {currencyOptions.map(cur => (
                                        <option key={cur} value={cur}>{cur}</option>
                                    ))}

                                </Form.Select>
                                <Form.Control.Feedback type="invalid">
                                    {state.errors.currency}
                                </Form.Control.Feedback>
                            </Col>
                        </Form.Group>
                    </Form>
                </Card.Body>
            </Card>
        </Container>
    );
};


export default ProfileUser;