"use client";
import { useNavigation } from "@core/app/hooks/goto";
import Button from "@core/app/components/Button/Button";
import { useEffect } from "react";
import SearchIcon from '@mui/icons-material/Search';

export interface ExploreCategoriesProps {
    containerHeight?: string;
    message?: string;
}

export default function ExploreCategories({ containerHeight, message }: ExploreCategoriesProps) {
    const { goTo } = useNavigation();

    return (
        <div
            style={{
                minHeight: containerHeight || "60vh",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                flexDirection: "column",
                padding: "60px 20px",
                textAlign: "center",
                animation: "fadeIn 0.5s ease-out forwards",
            }}
        >
            <div 
                style={{
                    width: "120px",
                    height: "120px",
                    borderRadius: "50%",
                    background: "rgba(225, 29, 72, 0.1)", /* Soft wine-red / coral */
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    marginBottom: "30px",
                    boxShadow: "0 0 30px rgba(225, 29, 72, 0.05)"
                }}
            >
                <SearchIcon sx={{ fontSize: 60, color: "var(--wine-red)" }} />
            </div>

            {message && (
                <h2 style={{ 
                    color: "var(--black)", 
                    fontWeight: "800", 
                    fontSize: "26px",
                    marginBottom: "15px",
                    maxWidth: "600px",
                    lineHeight: "1.3"
                }}>
                    {message}
                </h2>
            )}

            <p style={{ 
                color: "var(--gray-dark)", 
                fontSize: "16px",
                lineHeight: "1.6",
                marginBottom: "40px",
                maxWidth: "500px"
            }}>
                Explorá entre nuestras categorías y encontrá el servicio perfecto. ¡Hay miles de opciones esperando por vos!
            </p>

            <Button
                text="Explorar categorías"
                width="custom"
                onClick={() => {
                    goTo("/landing/categories");
                }}
            />
        </div>
    );
}
