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

import { Card } from '~/components/ui/card';
import { titleize } from '~/utils/format';

export const WorkspaceMessages = ({
  messages,
}: {
  messages: { _id: string; content: string; role: string; status: string }[];
}) => (
  <Card className='gap-3'>
    <Text className='text-foreground font-semibold'>Messages</Text>
    {messages.length ? (
      messages.map((message) => (
        <View key={message._id} className='border-border border-b pb-2'>
          <Text className='text-muted-foreground text-xs'>
            {titleize(message.role)} · {titleize(message.status)}
          </Text>
          <Text className='text-foreground mt-1'>{message.content}</Text>
        </View>
      ))
    ) : (
      <Text className='text-muted-foreground text-sm'>No messages yet.</Text>
    )}
  </Card>
);
