"use client";
import {
  CardContent,
  Typography,
  Grid,
  Button,
  Avatar,
  Box,
} from "@mui/material";
import { Stack } from "@mui/system";
import { IconMapPin } from "@tabler/icons-react";
import BlankCard from "../../shared/BlankCard";

import ParentCard from "../../shared/ParentCard";

import FollowerCardCode from "./code/FollowerCardCode";

const followerCard = [
  {
    title: "Andrew Grant",
    location: "El Salvador",
    avatar: "/images/profile/user-4.jpg",
  },
  {
    title: "Leo Pratt",
    location: "Bulgaria",
    avatar: "/images/profile/user-2.jpg",
  },
  {
    title: "Charles Nunez",
    location: "Nepal",
    avatar: "/images/profile/user-3.jpg",
  },
];

const FollowerCard = () => {
  return (
    <ParentCard title="Follower Card" codeModel={<FollowerCardCode />}>
      <Grid container spacing={3}>
        {followerCard.map((card, index) => (
          <Grid
            key={index}
            size={{
              xs: 12,
              sm: 4
            }}>
            <BlankCard>
              <CardContent>
                <Stack
                  direction="row"
                  spacing={2}
                  alignItems="center"
                  justifyContent="space-between"
                >
                  <Stack direction="row" spacing={2}>
                    <Avatar src={card.avatar} alt={card.avatar} />
                    <Box>
                      <Typography variant="h6">{card.title}</Typography>
                      <Typography
                        variant="subtitle1"
                        color="textSecondary"
                        display="flex"
                        alignItems="center"
                        gap="3px"
                      >
                        <IconMapPin width={18} /> {card.location}
                      </Typography>
                    </Box>
                  </Stack>
                  <Button variant="contained" color="primary">
                    Follow
                  </Button>
                </Stack>
              </CardContent>
            </BlankCard>
          </Grid>
        ))}
      </Grid>
    </ParentCard>
  );
};

export default FollowerCard;
