import { RecentGroupList } from '@/app/groups/recent-group-list'
import { Button } from '@/components/ui/button'
import { getGroups } from '@/lib/api'
import { Plus } from 'lucide-react'
import { Metadata } from 'next'
import Link from 'next/link'

export const metadata: Metadata = {
  title: 'Recently visited groups',
}

export default async function GroupsPage() {
  async function getGroupsAction(groupIds: string[]) {
    'use server'
    return getGroups(groupIds)
  }

  return (
    <main>
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-2">
        <h1 className="font-bold text-2xl mb-4">
          <Link href="/groups">Recently visited groups</Link>
        </h1>
        <Button asChild>
          <Link href="/groups/create">
            <Plus className="w-4 h-4 mr-2" />
            Create group
          </Link>
        </Button>
      </div>
      <RecentGroupList getGroupsAction={getGroupsAction} />
    </main>
  )
}