Untitled

const { widget } = figma;
const { AutoLayout, Frame, Text } = widget;

import Avatar from './components/Avatar';
import Button from './components/Button';
import SocialButton from './components/SocialButton';

const UserProfileScreen = () => (
  <AutoLayout
    direction="vertical"
    padding={20}
    spacing={20}
    horizontalAlignItems="center"
    verticalAlignItems="center"
  >
    
    {/* First User Profile */}
    <AutoLayout
      direction="horizontal"
      spacing={10}
      horizontalAlignItems="center"
      verticalAlignItems="center"
    >
      <Avatar size="m" style="solid-bg" />
      <Button
        label="Follow"
        style="filled"
        theme="primary"
        size="small"
        onClick={() => console.log('Follow button clicked')}
      />
      <SocialButton
        label="Facebook"
        icon="<svg ... />" // Replace with actual Facebook SVG icon
        state="default"
      />
    </AutoLayout>
    
    {/* Second User Profile */}
    <AutoLayout
      direction="horizontal"
      spacing={10}
      horizontalAlignItems="center"
      verticalAlignItems="center"
    >
      <Avatar size="m" style="memoji" />
      <Button
        label="Message"
        style="outline"
        theme="neutral"
        size="small"
        onClick={() => console.log('Message button clicked')}
      />
      <SocialButton
        label="Twitter"
        icon="<svg ... />" // Replace with actual Twitter SVG icon
        state="default"
      />
    </AutoLayout>
    
    {/* Third User Profile */}
    <AutoLayout
      direction="horizontal"
      spacing={10}
      horizontalAlignItems="center"
      verticalAlignItems="center"
    >
      <Avatar size="m" style="illustration" />
      <Button
        label="Add Friend"
        style="filled"
        theme="error"
        size="small"
        onClick={() => console.log('Add Friend button clicked')}
      />
      <SocialButton
        label="LinkedIn"
        icon="<svg ... />" // Replace with actual LinkedIn SVG icon
        state="default"
      />
    </AutoLayout>
    
  </AutoLayout>
);

export default UserProfileScreen;