import { FlexContainer, Typography } from "@/components/shared/components"

type SelectTokenVIewProps = {
  title: string
  subtitle?: string
  children: React.ReactNode
}

export default function SelectTokenView({
  subtitle,
  title,
  children,
}: SelectTokenVIewProps) {
  return (
    <FlexContainer
      alignItems="center"
      flexDirection="column"
      gap={2.8}
      opacityInEffect
    >
      <FlexContainer
        width={100}
        flexDirection="column"
        gap={0.4}
        alignItems="center"
      >
        <Typography textAlign="center">{title}</Typography>
        {subtitle && <Typography textAlign="center">{subtitle}</Typography>}
      </FlexContainer>
      {children}
    </FlexContainer>
  )
}