import { Avatar } from 'components/avatar';
import { Button } from 'components/button';
import { Card } from 'components/card';
import { Divider } from 'components/divider';
import { Container, Row } from 'components/layout';
import { Text } from 'components/text';
import { Hand } from 'icons';

export const Blocked = () => {
  return (
    <Container>
      <Divider colorVariant="divider" directionVariant="horizontal" />
      <Row mt="s" justifyContent="space-between">
        <Text variant="body" color="title">
          19 blocked users
        </Text>
        <Button leftElement={<Hand />} title="Block user" titleColor="secondary" />
      </Row>
      <Card colorVariant="base-02-hover" mt="s" sizeVariant="extra-small" variant="plain">
        <Text variant="caption">
          Blocked users can't send you messages or add you to groups. They will not see your profile
          pictures, online and last seen status.
        </Text>
      </Card>
      <Container mt="s">
        {['Sarmad', 'Lebogang', 'Jai', 'AaliShan', 'Anna', 'Sandy', 'Perveen'].map((user) => {
          return (
            <Row mb="xs" alignItems="center" justifyContent="space-between">
              <Row alignItems="center">
                <Avatar shapeVariant="square" colorVariant="base-02" size={24} title={user} />
                <Text ml="xs" variant="body" color="title">
                  {user}
                </Text>
              </Row>
              <Button
                onPress={() => {}}
                titleVariant="caption"
                titleColor="grey-03"
                title="Unblock"
                sizeVariant="small"
                underlayColor="base"
                hoverColorVariant="base-02-hover"
              />
            </Row>
          );
        })}
      </Container>
    </Container>
  );
};