"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={`card w-full p-3 laptop:p-2 ${className}`}>
      <h2 className="text-base font-semibold mb-2 text-[var(--color-fg)]">
        Versionsinformationen
      </h2>
      <ul className="space-y-1">
        <li className="flex items-start gap-2">
          <Icon icon="bx:code-block" className="text-xl text-accent" />
          <p className="text-sm text-fg-muted">
            Applikationsversion:{" "}
            <span className="text-[var(--color-fg)]">{appVersion}</span>
          </p>
        </li>
        <li className="flex items-start gap-2">
          <Icon icon="mdi:web" className="text-xl text-accent" />
          <p className="text-sm text-fg-muted">
            Webversion:{" "}
            <span className="text-[var(--color-fg)]">{webVersion}</span>
          </p>
        </li>
      </ul>
    </div>
  );
};

export default VersionInfo;