import React, {  MouseEventHandler } from "react";


type CityProps = {
  handleClick: MouseEventHandler;
}

export default function Citylist({handleClick}: CityProps) {
  return (
    <div className="overflow-auto flex flex-row mb-10 md:flex-col md:basis-1/5 md:mr-10 bg-gray-400 rounded ">
      <button id={"Seoul"} onClick={handleClick} className="shrink-0 px-5 hover:underline">seoul</button>
      <button id={"Busan"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Busan</button>
      <button id={"Incheon"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Incheon</button>
      <button id={"Daegoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Daegoo</button>
      <button id={"Kwangjoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Kwangjoo</button>
      <button id={"Daejeon"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Daejeon</button>
      <button id={"Woolsan"} onClick={handleClick} className="shrink-0 px-5 hover:underline">woolsan</button>
      <button id={"Sejong"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Sejong</button>
      <button id={"Dokdo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Dokdo</button>
      <button id={"Jeju"} onClick={handleClick} className="shrink-0 px-5 hover:underline">jeju</button>
      {/* citylist */}
    </div> // Citylist Page
  );
};