work on team enrollment

src/features/tournaments/components/upcoming-tournament/enroll-team/team-selection-view.tsx

@@ -0,0 +1,57 @@
+import { Stack, Button, Divider, Autocomplete, Group, ComboboxItem } from '@mantine/core';
+import { PlusIcon } from '@phosphor-icons/react';
+import React, { useMemo, useState } from 'react';
+
+interface TeamSelectionViewProps {
+  options: ComboboxItem[];
+  onSelect: (teamId: string | undefined) => void;
+}
+
+const TeamSelectionView: React.FC<TeamSelectionViewProps> = React.memo(({
+  options,
+  onSelect
+}) => {
+  const [value, setValue] = useState<string>();
+  const selectedOption = useMemo(() => options.find(option => option.label === value), [value])
+
+
+  const handleCreateNewTeamClicked = () => onSelect(undefined);
+  const handleSelectExistingTeam = () => onSelect(selectedOption?.value)
+
+  return (
+    <Stack gap="md">
+      <Button
+        leftSection={<PlusIcon weight="bold" />}
+        onClick={handleCreateNewTeamClicked}
+        variant="light"
+        fullWidth
+      >
+        Create New Team
+      </Button>
+      
+      <Divider my="sm" label="or" />
+      
+      <Stack gap="sm">
+        <Autocomplete
+          placeholder="Select one of your existing teams"
+          value={selectedOption?.label || ''}
+          onChange={setValue}
+          data={options.map(option => option.label)}
+          comboboxProps={{ withinPortal: false }}
+        />
+        
+        <Button 
+          onClick={handleSelectExistingTeam}
+          disabled={!selectedOption}
+          fullWidth
+        >
+          Enroll Selected Team
+        </Button>
+      </Stack>
+    </Stack>
+  );
+});
+
+TeamSelectionView.displayName = 'TeamSelectionView';
+
+export default TeamSelectionView;