import cn from 'classnames';
import React, { FC } from 'react';
import { Text, View } from 'react-native';

import IconButton from '../../Button/IconButton';

type props = {
  text: string;
  icons?: {
    element: React.ReactNode;
    onPress: () => void;
  }[];
  center?: boolean;
  classNames?: string;
};

const Title: FC<props> = ({ text, icons, classNames, center }) => {
  return (
    <View
      className={cn(
        'flex-row items-center',
        { 'justify-between': !center, 'justify-center': center },
        classNames,
      )}
    >
      <Text className="font-panton text-lg font-bold text-primary">{text}</Text>
      <View className="flex-row space-x-1">
        {icons?.map((icon, index) => (
          <View key={index}>
            <IconButton variant="secondary" onPress={icon?.onPress}>
              {icon?.element}
            </IconButton>
          </View>
        ))}
      </View>
    </View>
  );
};

export default Title;
