import { ProjectClaimLayout } from './layout'
import { OrganizationSelector } from '@/components/ui/org-selector'

export interface ProjectClaimChooseOrgProps {
  onChoose: (orgSlug: string) => void
}

const MAX_ORGS_TO_SHOW = 5

export function ProjectClaimChooseOrg({ onChoose }: ProjectClaimChooseOrgProps) {
  return (
    <ProjectClaimLayout title="Claim a project">
      <div className="mx-auto gap-y-4 py-6 flex flex-col">
        <p className="text-sm text-foreground-light">
          This is the first step in claiming your Briven project. Once you're finished, the
          project will be transferred to Briven organization.
        </p>
        <p className="text-sm text-foreground-light">Please select an organization to continue.</p>
        <OrganizationSelector
          onSelect={onChoose}
          maxOrgsToShow={MAX_ORGS_TO_SHOW}
          canCreateNewOrg
        />
      </div>
    </ProjectClaimLayout>
  )
}