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={3}
          className="flex items-center"
          style={{ marginBottom: 0, color: "#1F2937", fontSize: "18px" }}>
          {Header}
        </Title>
      </div>

      {/* 右侧部分 */}
      {showButton && (
        <div className="flex items-center text-[#3a3a3a] cursor-pointer space-x-0.5 hover:text-[#00c0ef] transition" onClick={onClick}>
          <span className="text-[12px]">更多</span>
          <ChevronRightIcon className="w-4 h-4" />
        </div>
      )}
    </div>
  )
};