import React from "react";
import { useTranslation } from "react-i18next";
import { useLocalizedName } from "@/shared/common/localizedName";
import { useParams } from "react-router-dom";
import { useVision } from "../hooks/useVision";

export const ViewVision = () => {
  const { i18n, t } = useTranslation();
  const { id } = useParams<{ id: string }>();
  const { singleItem: item } = useVision(undefined, id);
  const locale = i18n.language;
  const localizedName = useLocalizedName();
  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-4 md:p-8">
      <div className="max-w-6xl w-full">
        {/* Header */}
        <div className="md:w-1/3 bg-gradient-to-br from-primary-50 to-primary-100 p-6 md:p-8 flex flex-col justify-center items-center">
          <div className="text-center">
            <div className="w-32 h-32 mx-auto mb-6 bg-white rounded-2xl shadow-lg flex items-center justify-center">
              <span className="text-5xl">{"image from goal"}</span>
            </div>
            <h3 className="text-xl font-bold text-gray-800 mb-2">
              {localizedName(item?.visionTitle)}
            </h3>
            <p className="text-gray-600">
              {localizedName(item?.visionDescription)}
            </p>
          </div>
        </div>

        <div className="flex items-center justify-between text-sm text-gray-500 border-t pt-4">
          <div className="flex items-center gap-2">
            <span
              className={`inline-block h-3 w-3 rounded-full ${item?.isActive ? "bg-primary-500" : "bg-gray-400"
                }`}></span>
            {item?.isActive ? t("Active") : t("Inactive")}
          </div>

          {item?.createdAt && (
            <span className="text-sm text-gray-500">
              {new Date(item.createdAt).toLocaleString(locale, {
                dateStyle: "medium",
                timeStyle: "short",
              })}
            </span>
          )}
        </div>
      </div>
    </div>
  );
};
