import type { ReactNode } from 'react'

type Props = {
  title: string
  tagline?: string
  children: ReactNode
}

export function LoginCard({ title, tagline, children }: Props) {
  return (
    <div className="login-card">
      <div className="login-card__brand">
        <h1 className="login-card__title">{title}</h1>
        {tagline && <p className="login-card__tagline">{tagline}</p>}
      </div>
      <div className="login-card__actions">
        {children}
      </div>
    </div>
  )
}