'use client';

import { MinusIcon, PlusIcon } from 'lucide-react';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';

type TableSectionProps = {
    tableNumber: number;
    onIncrement: () => void;
    onDecrement: () => void;
};

export const TableSection = ({ tableNumber, onIncrement, onDecrement }: TableSectionProps) => {
    const { t } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });

    return (
        <section className="bg-container rounded-container box-shadow-normal p-4 py-2">
            <div className="py-3">
                <div className='w-full grid grid-cols-2 justify-between items-center gap-2'>
                    <h3 className="text-sm2 font-medium leading-5 inline-block">{t("SectionTable.Title")}</h3>

                    <div className='w-full flex justify-end'>
                        <motion.div
                            whileTap={{ scale: 1.05 }}
                            className="bg-background active:drop-shadow-xs max-w-[132px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2"
                        >
                            <button
                                onClick={onIncrement}
                                className="bg-container hover:bg-container/60 size-6 flex justify-center items-center active:bg-container/30 rounded-sm"
                            >
                                <PlusIcon size={16} />
                            </button>
                            <motion.div
                                key={tableNumber}
                                initial={{ scale: 1 }}
                                animate={{ scale: [1.2, 0.95, 1] }}
                                transition={{ duration: 0.3 }}
                                className="text-sm2 pt-0.5 font-semibold"
                            >
                                {tableNumber}
                            </motion.div>
                            <button
                                onClick={onDecrement}
                                className="bg-container hover:bg-container/60 size-6 flex justify-center items-center active:bg-container/30 rounded-sm"
                            >
                                <MinusIcon size={16} />
                            </button>
                        </motion.div>
                    </div>
                </div>
            </div>
        </section>
    );
};

