import { FaCog } from "react-icons/fa";

export default function Channels() {
  const channels = ["Discussion", "Nature", "Portrait", "Architecture"];

  return (
    <div className="flex flex-col flex-grow border-b-2 border-b-gray-200">
      <div className="flex justify-between items-center p-4">
        <p className="flex-grow text-gray-500 font-medium text-xl">
          Canaux
        </p>
        <button className="px-1 pb-1 leading-none transition-all text-gray-400 hover:text-gray-500 hover:bg-gray-100 text-xl border border-gray-300 rounded-md">+</button>
      </div>
      <ul>
        {channels.map((channel) => (
          <li className="p-2 hover:bg-gray-100 cursor-pointer text-xl flex items-center" key={channel}>
            <p className="flex-grow">
              <span className="text-gray-400">#</span> {channel}
            </p>
            <FaCog className="transition hover:text-gray-700" />
          </li>
        ))}
      </ul>
    </div>
  )
}