import React from "react";
import { Button } from "./Button/Button";
import Typography from "./typography/Typography";

type AcceptCookiesProps = {
  onClickAccept?: () => void;
  onClickCustomise?: () => void;
};

export function AcceptCookies({
  onClickAccept,
  onClickCustomise,
}: AcceptCookiesProps) {
  return (
    <div className="px-12 py-4 w-full bg-blue-900 flex justify-between items-center">
      <div className="w-2/3 text-white pr-3">
        <Typography>
          By clicking “Accept All Cookies”, you agree to the storing of cookies
          on your device to enhance site navigation, analyze site usage, and
          assist in our marketing efforts.
        </Typography>
      </div>
      <div className="flex w-1/3  flex-col-reverse  lg:flex-row items-center lg:space-x-5 lg:justify-end ">
        <Button
          onClick={onClickCustomise}
          defaultStyle={false}
          className="bg-tranparent hover:bg-blue-200 active:bg-blue-400 focus:bg-none focus:outline-none text-blue-700"
        >
          Customize settings
        </Button>
        <Button
          onClick={onClickAccept}
          emphasis="high"
          className="focus:outline-none"
        >
          Accept all cookies
        </Button>
      </div>
    </div>
  );
}