import React from 'react';

import {

  View,

  StyleSheet,

  Pressable,

  ViewStyle,

} from 'react-native';

import { ThemedText } from '@/components/misc/themed-text'

import { Colors, Typography, Spacing, BorderRadius } from '@/constants/theme';

import { useThemeColor } from '@/hooks/use-theme-color';

interface SectionProps {

  children: React.ReactNode;

  style?: ViewStyle;

}

export const Section: React.FC<SectionProps> = ({ children, style }) => {

  const styles = StyleSheet.create({

    section: {

      marginBottom: Spacing.sectionGap,

    },

  });

  return <View style={[styles.section, style]}>{children}</View>;

};

interface SectionHeaderProps {

  title: string;

  actionLabel?: string;

  onActionPress?: () => void;

  style?: ViewStyle;

}

// XXX: A Section must either have a label as a pill/informative thing

// or it should be a link

export const SectionHeader: React.FC<SectionHeaderProps> = ({

  title,

  info,

  actionLabel,

  onActionPress,

  style,

}) => {

  const textColor = useThemeColor({}, 'text');

  const tintColor = useThemeColor({}, 'tint');

  const styles = StyleSheet.create({

    headerContainer: {

      flexDirection: 'row',

      justifyContent: 'space-between',

      alignItems: 'center',

      marginBottom: (Spacing.cardGap * 2),

    },

    title: {

      fontSize: Typography.headlineMd.fontSize,

      fontWeight: Typography.headlineMd.fontWeight,

      color: textColor,

    },

    actionButton: {

      padding: 4,

    },

    actionText: {

      fontSize: Typography.bodyMd.fontSize,

      fontWeight: '600',

      color: tintColor,

    },

  });

  // TODO: Rework these when we finally have chips/badges

  return (

    <View style={[styles.headerContainer, style]}>

      <ThemedText style={styles.title}>

        {title}

      </ThemedText>

      {info && !actionLabel && (

        <ThemedText>

          {info}

        </ThemedText>

      )}

      {actionLabel && !info && onActionPress && (

        <Pressable

          style={styles.actionButton}

          onPress={onActionPress}

          hitSlop={8}

        >

          <ThemedText style={styles.actionText}>

            {actionLabel}

          </ThemedText>

        </Pressable>

      )}

    </View>

  );

};