import * as React from 'react'
import { ShieldCheck } from 'lucide-react'
import { Logo } from '@/assets/logo'
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar'

type TeamSwitcherProps = {
  teams: {
    name: string
    logo: React.ElementType
    plan: string
  }[]
}

export function TeamSwitcher({ teams }: TeamSwitcherProps) {
  const [activeTeam, setActiveTeam] = React.useState(teams[0])

  React.useEffect(() => {
    setActiveTeam(teams[0])
  }, [teams])

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton
          size='lg'
          className='h-auto items-start rounded-2xl border border-sidebar-border/70 bg-[linear-gradient(180deg,rgba(15,36,71,0.98),rgba(10,26,53,0.98))] px-3 py-3 text-white hover:bg-[linear-gradient(180deg,rgba(15,36,71,0.98),rgba(10,26,53,0.98))]'
        >
          <div className='flex aspect-square size-10 items-center justify-center rounded-xl bg-white/10 text-[#d7b16d]'>
            <Logo className='size-5' />
          </div>
          <div className='grid flex-1 text-start text-sm leading-tight'>
            <span className='truncate font-semibold'>{activeTeam.name}</span>
            <span className='truncate text-xs text-white/60'>
              {activeTeam.plan}
            </span>
            <span className='mt-2 inline-flex w-fit items-center gap-1 rounded-full border border-white/10 bg-white/6 px-2 py-1 text-[10px] font-semibold tracking-[0.2em] text-white/72 uppercase'>
              <ShieldCheck className='size-3' />
              Secure Panel
            </span>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}
