"use client";

import { Button } from "antd";
import DineInIcon from "components/Icons/DineInIcon";
import DownIcon from "components/Icons/DownIcon";
import PickupIcon from "components/Icons/PickupIcon";
import useBreakPoint from "hooks/useBreakPoint";
import styles from "../menu.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";

interface ResponsiveServicesProps {
  orderType: string;
  translations: {
    common: {
      dineIn: string;
      pickup: string;
      more: string;
    };
  };
}

export default function ResponsiveServices({
  orderType,
  translations,
}: ResponsiveServicesProps) {
  const { isMobile } = useBreakPoint();

  // Hide pickup service if screen width is less than 400px (insufficient for 3 services)
  const shouldHidePickup = isMobile;

  return (
    <div className={styles.services}>
      <Button
        className={
          orderType == OrderType.DineIn
            ? styles.activeServiceButton
            : styles.serviceButton
        }
        icon={
          <div className={styles.dineInIcon}>
            <DineInIcon className={`${styles.icon}`} />
          </div>
        }
      >
        {translations.common.dineIn}
      </Button>

      {!shouldHidePickup && (
        <Button
          className={
            orderType == OrderType.Pickup
              ? styles.activeServiceButton
              : styles.serviceButton
          }
          icon={
            <div className={styles.pickupIcon}>
              <PickupIcon className={`${styles.pickupIcon} ${styles.icon}`} />
            </div>
          }
        >
          {translations.common.pickup}
        </Button>
      )}

      <Button
        className={
          orderType == "more"
            ? styles.activeServiceButton
            : styles.serviceButton
        }
      >
        {translations.common.more}{" "}
        <DownIcon className={`${styles.downIcon} ${styles.icon}`} />
      </Button>
    </div>
  );
}