cash-stacks/frontend/src/widgets/AccountSelect/index.tsx

import { Link } from 'react-router-dom'
import { message } from 'antd'
import { useUserContext } from '../../contexts/UserContext'

import './style.scss'
import { Button } from '../../elements/Button'

type Props = {
  selectProfile: (id: string) => void
}

export const AccountSelect = ({ selectProfile }: Props) => {
  const { accounts } = useUserContext()

  const handleSelect = (id: string) => {
    selectProfile(id)
    message.success(`Selected Account: ${id}`)
  }

  return (
    <>
      <h1>Select Account</h1>
      <div className="account-select">
        {accounts?.length
          ? accounts.map((account) => (
              <Button
                key={`account-${account.name}`}
                onClick={() => handleSelect(account.id)}
              >
                {account.name}
              </Button>
            ))
          : ''}
        <Link to="/account/new">Create New Budget!</Link>
      </div>
    </>
  )
}