import { useTrail } from "@react-spring/web";
import React from "react";
import {
  BsDiscord,
  BsFacebook,
  BsInstagram,
  BsTelegram,
  BsTwitter,
} from "react-icons/bs";
import Button from "../Button";
import Trail from "./Trail";

type Props = {};

const Introduction = (props: Props) => {
  return (
    <div className="flex flex-col gap-10 items-center text-white lg:w-3/4 max-w-4xl">
      <h4 className="lg:text-8xl md:text-7xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
        <Trail open={true}>
          <span>A digital currency</span>
          <span>payment for SGPT</span>
          <span>chat bot services</span>
        </Trail>
      </h4>
      <p className="w-full font-body text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-purple-300">
        The SGPT Token is a digital currency designed to facilitate payments for
        services provided by the SGPT chat bot. The chat bot is a powerful tool
        that utilizes artificial intelligence to communicate with users and
        provide valuable information and services.
      </p>

      <div className="flex flex-col justify-center mt-[15vh]">
        <h2 className="text-3xl mb-4 font-bold text-center">
          Join Our Community
        </h2>
        <div className="flex flex-wrap gap-4">
          <Button bgColor="bg-telegram">
            <div className="flex items-center gap-2">
              <BsTelegram size={18} />
              Telegram
            </div>
          </Button>
          <Button bgColor="bg-discord">
            <div className="flex items-center gap-2">
              <BsDiscord size={18} />
              Discord
            </div>
          </Button>
          <Button bgColor="bg-facebook">
            <div className="flex items-center gap-2">
              <BsFacebook size={18} />
              Facebook
            </div>
          </Button>
          <Button bgColor="bg-twitter">
            <div className="flex items-center gap-2">
              <BsTwitter size={18} />
              Twitter
            </div>
          </Button>
          <Button bgColor="bg-instagram">
            <div className="flex items-center gap-2">
              <BsInstagram size={18} />
              Instagram
            </div>
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Introduction;