import { Link } from 'react-router-dom'

import { TitleCard } from './TitleCard'

/**
 * @category Templates
 */
export function CardPage({
  title,
  hideTitle,
  children,
  parents,
}: {
  title: string
  hideTitle?: boolean
  children?: React.ReactNode
  parents?: { name: string; path: string }[]
}) {
  return (
    <main className='tw:flex-1 tw:overflow-y-auto tw:overflow-x-hidden tw:pt-2 tw:px-6 tw:min-w-80 tw:flex tw:justify-center'>
      <div className='tw:w-full tw:xl:max-w-6xl '>
        <div className='tw:text-sm breadcrumbs'>
          <ul>
            <li>
              <Link to={'/'}>Home</Link>
            </li>
            {parents?.map((b, i) => (
              <li key={i}>
                <Link to={b.path}>{b.name}</Link>
              </li>
            ))}
            <li>{title}</li>
          </ul>
        </div>
        <TitleCard hideTitle={hideTitle} title={title} topMargin='tw:my-2' className=' tw:mb-4'>
          {children}
        </TitleCard>
      </div>
    </main>
  )
}
