import { Map, List } from 'lucide-react';
import { useLaravelReactI18n } from 'laravel-react-i18n';

interface MobileViewToggleProps {
    isMapView: boolean;
    onToggle: (isMapView: boolean) => void;
}

export default function MobileViewToggle({ isMapView, onToggle }: MobileViewToggleProps) {
    const { t } = useLaravelReactI18n();

    return (
        <div className="lg:hidden fixed bottom-6 left-1/2 -translate-x-1/2 z-40">
            <div className="bg-white/95 dark:bg-gray-900/95 backdrop-blur-md rounded-full shadow-2xl border border-gray-200 dark:border-gray-700 p-1.5 flex gap-1">
                <button
                    type="button"
                    onClick={() => onToggle(false)}
                    className={`
                        flex items-center justify-center gap-2 px-6 py-3 rounded-full
                        font-semibold text-sm transition-all min-w-[110px]
                        ${!isMapView
                            ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg'
                            : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                        }
                    `}
                    aria-label={t('List view')}
                >
                    <List className="h-4 w-4" />
                    <span>{t('List')}</span>
                </button>

                <button
                    type="button"
                    onClick={() => onToggle(true)}
                    className={`
                        flex items-center justify-center gap-2 px-6 py-3 rounded-full
                        font-semibold text-sm transition-all min-w-[110px]
                        ${isMapView
                            ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg'
                            : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                        }
                    `}
                    aria-label={t('Map view')}
                >
                    <Map className="h-4 w-4" />
                    <span>{t('Map')}</span>
                </button>
            </div>
        </div>
    );
}