import { Button } from "antd";
import styles from "./CollectWay.module.css";
import { useState } from "react";
import { useTranslation } from "react-i18next";

export const CollectWay = (): JSX.Element => {
  const { t } = useTranslation();
  const [activeButton, setActiveButton] = useState<string>("counter");

  return (
    <div className={styles.collectWay}>
      <Button
        className={
          activeButton === "counter"
            ? styles.activeButton
            : styles.inactiveButton
        }
        onClick={() => setActiveButton("counter")}
      >
        {t("checkout.collectAtCounter")}
      </Button>
      <Button
        className={
          activeButton === "parking"
            ? styles.activeButton
            : styles.inactiveButton
        }
        onClick={() => setActiveButton("parking")}
      >
        {t("checkout.collectAtParking")}
      </Button>
    </div>
  );
};