import React, { useEffect, MouseEvent, MouseEventHandler } from "react";
import { Outlet, useSearchParams } from "react-router-dom";

type ThemeProps = {
  handleClick: MouseEventHandler;
}

export default function Theme({handleClick}: ThemeProps) {
  return (
    <div className="overflow-x-auto flex bg-emerald-400 rounded ">
      <button id={"surfing"} onClick={handleClick} className="shrink-0 px-5">서핑</button>
      <button id={"activity"} onClick={handleClick} className="shrink-0 px-5">액티비티</button>
      <button id={"camping"} onClick={handleClick} className="shrink-0 px-5 ">캠핑</button>
      <button id={"sking"} onClick={handleClick} className="shrink-0 px-5">스키</button>
      <button id={"boat"} onClick={handleClick} className="shrink-0 px-5">보트</button>
      <button id={"desert"} onClick={handleClick} className="shrink-0 px-5">사막</button>
      <button id={"golf"} onClick={handleClick} className="shrink-0 px-5">골프</button>
      <button id={"cave"} onClick={handleClick} className="shrink-0 px-5">동굴</button>
      <button id={"history"} onClick={handleClick} className="shrink-0 px-5">문화재</button>
      <button id={"zoo"} onClick={handleClick} className="shrink-0 px-5">동물원</button>
      <button id={"cycling"} onClick={handleClick} className="shrink-0 px-5">사이클링</button>
    </div>
  );
};