import React from 'react';

import { View, Text, StyleSheet, ViewStyle } from 'react-native';

import { Row } from '@/components/ui/LayoutHelpers';

import { Card } from '@/components/ui/Cards';

import { getMoodComponent, intensityLabel } from '@/constants/mood-components';

import { Theme } from '@/constants/theme';

interface MoodComponentCardProps {

  id: string;

  intensity: number;

  style?: ViewStyle;

}

export const MoodComponentCard: React.FC<MoodComponentCardProps> = ({

  id,

  intensity,

  style,

}) => {

  const definition = getMoodComponent(id);

  if (!definition) return null;

  return (

    <Card style={[styles.card, style]}>

      <Row gap={6} style={styles.inner}>

        <View style={styles.mood}>

          <View style={[styles.dot, { backgroundColor: definition.color }]} />

          <Text style={styles.label} numberOfLines={1}>

            {definition.label}

          </Text>

        </View>

        <Text style={styles.intensity} numberOfLines={1}>

          {intensityLabel(intensity)}

        </Text>

      </Row>

    </Card>

  );

};

const styles = StyleSheet.create({

  card: {

    paddingHorizontal: 10,

    paddingVertical: 8,

  },

  mood: {

    flex: 1,

    flexDirection: 'row',

    alignItems: 'center',

    height: '100%',

  },

  inner: {

    alignItems: 'baseline',

    flexShrink: 1,

  },

  dot: {

    width: 8,

    height: 8,

    borderRadius: 5,

    flexShrink: 0,

    marginRight: 4,

    justifyContent: 'center'

  },

  label: {

    fontSize: Theme.typography.bodyMd.fontSize,

    fontWeight: '600',

    color: Theme.colors.light.text,

    flexShrink: 1,

  },

  intensity: {

    fontSize: Theme.typography.labelSm.fontSize,

    color: Theme.colors.light.moodIntensityLabel,

    flexShrink: 1,

    height: '100%',

  },

});