import { Icon } from "@deuna/components/icons";
import { Title } from "@deuna/components/typography";
import { Button } from "@deuna/components/button";
import { Flex } from "@deuna/components/layout";
import { useSteps } from "@deuna/checkout-core";

import WowIcon from "./WowIcon";

const HeadersObj = [
  {
    step: "1",
    label: "Encuentra tus direcciones",
    icon: "bolt",
    color: "red",
  },
  {
    step: "2",
    label: "Tus direcciones",
    icon: "access_time",
    color: "red",
  },
  {
    step: "3",
    label: "Todo Listo",
    icon: "check",
    color: "green",
  },
];

interface HeaderProps {
  handleClose?: () => void;
}

export const Header = ({ handleClose }: HeaderProps) => {
  const { currentStepIndex } = useSteps();

  const { icon, label, color } = HeadersObj[currentStepIndex];

  return (
    <>
      <Flex
        display="flex"
        width="100%"
        position="relative"
        alignItems="center"
        justifyContent="space-between"
      >
        <WowIcon />
        <Title margin="0px"></Title>
        <Button onClick={handleClose} kind="ghost" style={{ padding: "0px" }}>
          <Icon iconName="close" size="small" />
        </Button>
      </Flex>
    </>
  );
};