import GitHub from "../../public/github.svg?react";
import Bluesky from "../../public/bluesky.svg?react";
import X from "../../public/x.svg?react";
import classes from "./TeamMember.module.css";

export default function TeamMember({ github, x, bsky, children }) {
  return (
    <div
      className={`${classes.root} flex-1 min-w-full max-w-md md:min-w-[calc(50%-4rem)] lg:min-w-[calc(33%-4rem)] flex flex-col items-center justify-center p-4 py-8 rounded-xl bg-gray-50 dark:bg-gray-800 text-center shadow-lg dark:shadow-[rgba(255,255,255,0.1)] border border-gray-500`}
    >
      {children}
      <div className="flex items-center justify-center gap-4">
        {github && (
          <a href={github} target="_blank" rel="noreferrer">
            <GitHub className="w-4 h-4" />
          </a>
        )}
        {bsky && (
          <a href={bsky} target="_blank" rel="noreferrer">
            <Bluesky className="w-4 h-4" />
          </a>
        )}
        {x && (
          <a href={x} target="_blank" rel="noreferrer">
            <X className="w-4 h-4" />
          </a>
        )}
      </div>
    </div>
  );
}