"use client"; // components/main/uebersicht/VersionInfo.tsx
import React from "react";
import { Icon } from "@iconify/react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";

type VersionInfoProps = {
  className?: string;
};

const VersionInfo: React.FC<VersionInfoProps> = ({ className = "" }) => {
  const appVersion =
    useSelector((state: RootState) => state.systemSettingsSlice.appVersion) ||
    "Unbekannt";
  const webVersion = useSelector(
    (state: RootState) => state.webVersionSlice.appVersion
  );

  return (
    <div
      className={`bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 w-full laptop:p-2 ${className}`}
    >
      <h2 className="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">
        Versionsinformationen
      </h2>

      <div className="flex flex-row p-2 space-x-2">
        <Icon icon="bx:code-block" className="text-xl text-blue-400" />
        <p className="text-sm text-gray-600 dark:text-gray-300">
          Applikationsversion: {appVersion}
        </p>
      </div>

      <div className="flex flex-row p-2 space-x-2">
        <Icon icon="mdi:web" className="text-xl text-blue-400" />
        <p className="text-sm text-gray-600 dark:text-gray-300">
          Webversion: {webVersion}
        </p>
      </div>
    </div>
  );
};

export default VersionInfo;
