const sports = [
  "Soccer",
  "Basketball",
  "Tennis",
  "Ice Hockey",
  "Volleyball",
  "Handball",
  "Baseball",
  "American Football",
  "Cricket",
  "Rugby",
]

export function SportsSidebar() {
  return (
    <aside className="hidden h-full w-52 shrink-0 border-r bg-sidebar px-3 py-3 text-sm text-sidebar-foreground lg:block">
      <div className="mb-3 font-semibold uppercase tracking-wide text-xs text-muted-foreground">
        Sports Menu
      </div>
      <ul className="space-y-1">
        {sports.map((sport) => (
          <li key={sport}>
            <button className="w-full rounded px-2 py-1 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground">
              {sport}
            </button>
          </li>
        ))}
      </ul>
    </aside>
  );
}