import * as React from "react";
import { View } from "react-native";
import { InfoContainer, ShowButton } from "./styled";
import Button from "../ui/button";
import { circleIn } from "../animations/easings";

type Props = {
  onManageMySubscription: () => void;
  onEditProfile: () => void;
  onLogout: () => void;
};

function Info({ onManageMySubscription, onLogout, onEditProfile }: Props) {
  return (
    <InfoContainer>
      <View style={{ padding: 20, paddingTop: 0 }}>
        <ShowButton duration={0.3} delay={0.1} easing={circleIn}>
          <Button
            variant="filled"
            label="Manage My Subscription"
            onPress={onManageMySubscription}
          />
        </ShowButton>
      </View>
      <View
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-around",
        }}
      >
        <ShowButton duration={0.3} delay={0.15} easing={circleIn}>
          <Button
            variant="filled"
            label="Edit Profile"
            onPress={onEditProfile}
          />
        </ShowButton>
        <ShowButton duration={0.3} delay={0.2} easing={circleIn}>
          <Button variant="filled" label="Log out" onPress={onLogout} />
        </ShowButton>
      </View>
    </InfoContainer>
  );
}

export default Info;