import type { ReactNode } from 'react';

import { Layout } from '~/src/ui/layouts/layout';
import { Button } from '~/src/ui/primitives/button';
import { Text } from '~/src/ui/primitives/text';
import { tileStyles } from './styles';

interface TileProps {
  icon?: ReactNode;
  title: string;
  onClick: () => void;
}

export const Tile = ({ onClick, icon, title }: TileProps) => {
  return (
    <Button onClick={onClick} style={tileStyles.base}>
      <Layout column gap="3" align="center" justify="center">
        {icon}
        <Text variant="body-small" align="center">
          {title}
        </Text>
      </Layout>
    </Button>
  );
};