import ListButton from "@/components/list-button"
import Sheet from "@/components/sheet/sheet"
import TeamList from "@/features/teams/components/team-list"
import { TeamInfo } from "@/features/teams/types"
import { useSheet } from "@/hooks/use-sheet"
import { UsersIcon } from "@phosphor-icons/react"
import { useMemo } from "react"

interface TeamListButtonProps {
  teams: TeamInfo[]
  isRegional?: boolean
}

const TeamListButton: React.FC<TeamListButtonProps> = ({ teams, isRegional }) => {
  const count = useMemo(() => teams.length, [teams]);
  const { open, isOpen, toggle } = useSheet();
  return (
    <>
      <ListButton
        label={`View Teams (${count})`}
        Icon={UsersIcon}
        onClick={open}
      />

      <Sheet title="Enrolled Teams" opened={isOpen} onChange={toggle}>
        <TeamList teams={teams} isRegional={isRegional} />
      </Sheet>
    </>
  )
}

export default TeamListButton;