import React from "react";
import { Link } from "react-router-dom";

export default function SubScriptionTop({ className }) {
  return (
    <div
      className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-9 p-4 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
        className || ""
      }`}
    >
      <div className="lg:w-8/12 w-full mb-8 lg:mb-0">
        <h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">
         Some how we will say the name of uout current Subscription 
        </h1>
        <p className="text-base text-thin-light-gray tracking-wide">
          Last paymant date + nect pay day 
        </p>
      </div>
      <div className="flex-1 flex lg:justify-end">
        <div className="flex items-center space-x-5">
          <Link
            to="#"
            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
          >
            Some actions
          </Link>
          <Link to="#" className="text-dark-gray dark:text-white text-base">
            <span className=" border-b dark:border-[#5356fb29]  border-dark-gray font-medium">
              terms and conditions 
            </span>
          </Link>
        </div>
      </div>
    </div>
  );
}