import React from "react";
import { Typography, Button } from "antd";
import { AcademicCapIcon, ChevronRightIcon } from "@heroicons/react/24/outline";

const { Title } = Typography;

type Props = {
  Header:  React.ReactNode;
  showButton?: boolean;
  onClick?: () => void;
};

export const DataNavigation: React.FC<Props> = ({ Header, showButton = true, onClick }) => {
  return (
    <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg mb-3">
      {/* 左侧部分 */}
      <div className="flex items-center">
        <Title
          level={4}
          style={{ marginBottom: 0, color: "#1F2937", fontSize: "16px" }}>
          {Header}
        </Title>
      </div>

      {/* 右侧部分 */}
      {showButton && (
        <Button
          color="default"
          variant="link"
          style={{ gap: 4 }}
          onClick={onClick}>
          <span className="text-sm">更多</span>
          <ChevronRightIcon className="w-4 h-4" />
        </Button>
      )}
    </div>
  )
};
