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

import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';

import { titleize } from '~/utils/format';

export const ThreadMessageList = ({
  messages,
}: {
  messages: Doc<'threadMessages'>[];
}) => (
  <View className='gap-3'>
    {messages.map((message) => (
      <View
        key={message._id}
        className={
          message.role === 'user'
            ? 'border-primary/30 bg-primary/10 rounded-lg border p-3'
            : 'border-border bg-card rounded-lg border p-3'
        }
      >
        <Text className='text-muted-foreground text-xs'>
          {titleize(message.role)} · {titleize(message.status)}
        </Text>
        <Text className='text-foreground mt-2 leading-5'>
          {message.content}
        </Text>
      </View>
    ))}
  </View>
);
