import React from 'react';
import { useRegionalizationContext } from '../../context/RegionalizationContext';
import { PikcupPointType } from '../../types/PikcupPointType';
import { SetViewButton } from '../SetView';

interface StoreProps {
  pickupPointInfos: PikcupPointType;
}

export const PickupPoint = ({ pickupPointInfos }: StoreProps) => {
  const { pickup, setPickupAddress, setInternalMethod } =
    useRegionalizationContext();
  const { isActive, name, address } = pickupPointInfos;

  if (!isActive) {
    return null;
  }

  return (
    <div className="store-container">
      <h3>{name}</h3>
      <div>
        <p>
          {address.street}, {address.number}
          <br />
          {address.neighborhood}
        </p>
        <SetViewButton
          view="ConfirmScreen"
          className="choose-store"
          onClick={() => {
            setInternalMethod?.('pickup-in-point');
            setPickupAddress?.(pickupPointInfos);
          }}
        >
          {pickup?.chooseStore}
        </SetViewButton>
      </div>
    </div>
  );
};