import * as React from "react";
import classNames from "classnames";

import { ChevronDown } from "@faulty/gdq-icons/icons/ChevronDown";
import { ChevronUp } from "@faulty/gdq-icons/icons/ChevronUp";

import styles from "./DropdownChevron.module.css";

interface DropdownChevronProps {
  isOpen: boolean;
  className?: string;
}

export function DropdownChevron(props: DropdownChevronProps) {
  const { isOpen, className } = props;
  const ChevronIcon = isOpen ? ChevronUp : ChevronDown;

  return <ChevronIcon className={classNames(styles.chevron, className)} />;
}