import React, { FC } from "react";

import Avatar from "@/components/elements/base/avatar/Avatar";
import Button from "@/components/elements/base/button/Button";
import Card from "@/components/elements/base/card/Card";

interface ProfileCardProps {
  picture?: string;
  name?: string;
  role?: string;
  bio?: string;
  stats?: {
    projects: number;
    friends: number;
    posts: number;
  }
}

const ProfileCard: FC<ProfileCardProps> = ({ picture, name, role, bio, stats }) => {
  return (
    <Card
      color="contrast"
      shadow="flat"
      className="flex w-full p-6"
    >
      <div
        className="flex w-full flex-col space-y-4"
      >
        <div className="mx-auto w-24">
          <Avatar src="/img/avatars/15.svg" shape="rounded" size="xl" />
        </div>
        <div className="text-center">
          <h3 className="text-lg font-semibold text-muted-800 dark:text-muted-100">
            Josh Meyers
          </h3>
          <p className="font-sans text-xs text-muted-400">UI/UX Designer</p>
        </div>
      </div>
      <div
        className="mt-4 space-y-6"
      >
        <p
          className="text-muted-500"
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ego vero
          isti, inquam, permitto nullus est igitur.
        </p>
        <div className="mb-8 flex divide-x divide-muted-200 font-sans dark:divide-muted-800">
          <div
            className="flex flex-1 flex-col text-center"
          >
            <span className="block text-lg font-medium text-muted-700 dark:text-muted-200">
              15
            </span>
            <span className="block text-xs font-medium uppercase text-muted-400">
              Projects
            </span>
          </div>
          <div
            className="flex flex-1 flex-col text-center"
          >
            <span className="block text-lg font-medium text-muted-700 dark:text-muted-200">
              321
            </span>
            <span className="block text-xs font-medium uppercase text-muted-400">
              Friends
            </span>
          </div>
          <div
            className="flex flex-1 flex-col text-center"
          >
            <span className="block text-lg font-medium text-muted-700 dark:text-muted-200">
              78
            </span>
            <span className="block text-xs font-medium uppercase text-muted-400">
              Posts
            </span>
          </div>
        </div>
        <div
          className="flex"
        >
          <div className="hidden">
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-orange-100 text-orange-500 dark:bg-orange-500/10">
              <Avatar
                size="xxs"
                src="https://vuero.cssninja.io/images/icons/stacks/sketch.svg"
              />
            </div>
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-orange-100 text-orange-500 dark:bg-orange-500/10">
              <Avatar
                size="xxs"
                src="https://vuero.cssninja.io/images/icons/stacks/illustrator.svg"
              />
            </div>
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-orange-100 text-orange-500 dark:bg-orange-500/10">
              <Avatar
                size="xxs"
                src="https://vuero.cssninja.io/images/icons/stacks/photoshop.svg"
              />
            </div>
          </div>
          <div>
            <Button
              color="primary"
              shape="straight"
              className="w-full"
            >
              View Profile
            </Button>
          </div>
        </div>
      </div>
    </Card>
  );
};

export default LandingThemedCard;