import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { User } from 'lucide-react';

interface ProfileBioProps {
  bio: string;
}

export function ProfileBio({ bio }: ProfileBioProps) {
  return (
    <Card>
      <Box mb={3}>
        <Heading level={2} icon={<Icon icon={User} size={5} color="#3b82f6" />}>
          About
        </Heading>
      </Box>
      <Text color="text-gray-300">{bio}</Text>
    </Card>
  );
}