import type { CreateFlowStage } from '../components/CreateFlow/types';

import { useAppRouter } from '~/src/lib/router2';
import { TrackSearch } from './components/TrackSearch';

export const ChooseTrackStage: CreateFlowStage = ({ events }) => {
  const router = useAppRouter();
  const { artistUrl } = router.getQuery();

  return (
    <TrackSearch
      artistUrl={artistUrl}
      onSelectTrack={({ sourceUrl }) => {
        events.emit('submit', { artistUrl, sourceUrl });
      }}
    />
  );
};