import React from "react"
import { Typography } from "antd"
import { 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">
      {/* 左侧部分 */}
      <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-[#3581e3] transition-colors duration-200"
          onClick={onClick}>
          <span className="text-[12px]">更多</span>
          <ChevronRightIcon className="w-4 h-4" />
        </div>
      )}
    </div>
  )
}