import { Link } from 'react-router-dom'
import { message } from 'antd'
import './style.scss'
import { Button } from '../../elements/Button'
import { useAccounts } from '../../hooks/getMany/useAccounts'

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

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

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

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