"use client";
import { Button, Col, Row, Select } from "antd";
import Image from "next/image";
import { imageType } from "@/utils/imageType";
import { FiFilter } from "react-icons/fi";
import PostCard from "@/components/common/feed/postCard";
import React, { useEffect, useState } from "react";
import SearchBar from "@/components/common/feed/searchBar";
import MainLayout from "@/components/layout/mainLayout";
import PlayerSection from "./partials/playerSection";
import TeamSection from "./partials/teamSection";
import CoachSection from "./partials/coachSection";
export default function Explore() {
const [searchActive, setSearchActive] = useState(false);
const [currentSearchValue, setCurrentSearchValue] = useState("");
const handleSearchClick = (value: any) => {
setCurrentSearchValue(value);
setSearchActive(true);
console.log("Search value clicked: " + value);
};
return (
<MainLayout>
<div className="py-[20px]">
<Row className="flex">
<Col span={24} className="md:order-1 order-1">
<div className="px-4 md:border-b-[1px] border-0
border-[#EAECF0] border-solid md:pb-4 pb-0">
<SearchBar
setSearchActive={setSearchActive} onSearchClick={handleSearchClick} />
</div>
</Col>
{searchActive ? (
<Col span={24} className="order-4 mt-8">
{/* valuenya search keyword =
{currentSearchValue} */}
<CoachSection />
{/* <TeamSection /> */}
{/* <PlayerSection /> */}
</Col>
) : (
<>
<Col span={24} className="md:order-2
order-3">
<div className="h-[287px] relative
md:mb-0 mb-5">
<Image src={imageType.feed}
alt="image" fill style={{ objectFit: "cover" }} />
<div className="absolute
bottom-0 left-0 right-0 px-4 py-3 bg-gradient-to-b from-transparent to-gray-900">
<h1 className="text-
[32px] leading-[32px] font-[700] text-[#ffffff] mb-2">Discover your favorite
player, teams and more</h1>
<p className="text-
[#ffffff]">Find them in your explore.</p>
</div>
</div>
</Col>
<Col span={24} className="order-4 mt-8">
<CoachSection />
<TeamSection />
<PlayerSection />
</Col>
</>
)}
</Row>
</div>
</MainLayout>
);
}
