'use client'
import React from 'react'
import { Button } from '@/components/ui/button'
import { useRouter } from 'next/navigation'

interface OrderButtonsProps {
    status: string
    orderId: string
}

const OrderButtons: React.FC<OrderButtonsProps> = ({ status, orderId }) => {
    const statusLower = status.toLowerCase();
    const router = useRouter();

    switch (statusLower) {
        case 'pending':
            return (
                <>
                    <Button
                        variant="outline"
                        className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
                        onClick={() => router.push(`/profile/orders/${orderId}`)}
                    >
                        جزئیات سفارش
                    </Button>
                    <Button className='bg-primary hover:bg-primary/80 px-4 sm:px-6 py-2 h-8 sm:h-9 text-white text-xs sm:text-sm'>
                        پرداخت
                    </Button>
                </>
            );

        case 'processing':
        case 'shipped':
            return (
                <>
                    <Button
                        variant="outline"
                        className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
                    >
                        پیگیری سفارش
                    </Button>
                    <Button
                        variant="outline"
                        className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
                        onClick={() => router.push(`/profile/orders/${orderId}`)}
                    >
                        جزئیات سفارش
                    </Button>
                </>
            );

        case 'delivered':
            return (
                <>
                    <Button
                        variant="outline"
                        className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
                    >
                        امتیازدهی
                    </Button>
                    <Button className='bg-primary hover:bg-primary/80 px-4 sm:px-6 py-2 h-8 sm:h-9 text-white text-xs sm:text-sm'>
                        خرید مجدد
                    </Button>
                </>
            );

        case 'returned':
            return (
                <>
                    <Button
                        variant="outline"
                        className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
                        onClick={() => router.push(`/profile/orders/${orderId}`)}
                    >
                        جزئیات سفارش
                    </Button>
                    <Button className='bg-primary hover:bg-primary/80 px-4 sm:px-6 py-2 h-8 sm:h-9 text-white text-xs sm:text-sm'>
                        خرید مجدد
                    </Button>
                </>
            );

        case 'cancelled':
            return (
                <Button className='bg-primary hover:bg-primary/80 px-4 sm:px-6 py-2 h-8 sm:h-9 text-white text-xs sm:text-sm'>
                    سفارش مجدد
                </Button>
            );

        default:
            return (
                <Button
                    variant="outline"
                    className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
                    onClick={() => router.push(`/profile/orders/${orderId}`)}
                >
                    جزئیات سفارش
                </Button>
            );
    }
};

export default OrderButtons
