"use client";

import { Button, Grid } from "antd";
import DineInIcon from "components/Icons/DineInIcon";
import DownIcon from "components/Icons/DownIcon";
import PickupIcon from "components/Icons/PickupIcon";
import styles from "../menu.module.css";

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

const { useBreakpoint } = Grid;

export default function ResponsiveServices({ orderType, translations }: ResponsiveServicesProps) {
  const { xs } = useBreakpoint();
  
  // Hide pickup service if screen width is less than 400px (insufficient for 3 services)
  const shouldHidePickup = xs;
  
  return (
    <div className={styles.services}>
      <Button
        className={
          orderType == "dine-in"
            ? styles.activeServiceButton
            : styles.serviceButton
        }
        icon={
          <div className={styles.dineInIcon}>
            <DineInIcon className={`${styles.icon}`} />
          </div>
        }
      >
        {translations.common.dineIn}
      </Button>
      
      {!shouldHidePickup && (
        <Button
          className={
            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>
  );
}