import React from "react";
import { useTranslation } from "react-i18next";
import { useLocalizedName } from "@/shared/common/localizedName";
import { MessageItem } from "../types/messageTypes";

interface ViewMessageProps {
  item: MessageItem;
}

export const ViewMessage = ({ item }: ViewMessageProps) => {
  const { t } = useTranslation();
  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="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
            {localizedName(item.messageTitle) || t("Leadership Message")}
          </h1>
          <div className="w-24 h-1 bg-primary-600 mx-auto"></div>
          <p className="text-gray-600 mt-4 max-w-2xl mx-auto">
            {t("Message from our leadership")}
          </p>
        </div>

        {/* Message Card */}
        <div className="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
          <div className="flex flex-col md:flex-row">
            {/* Image Section with overlay */}
            <div className="md:w-2/5 relative">
              <img
                src={item.presigned || "/placeholder.jpg"}
                alt={localizedName(item.messageTitle) || "Leadership"}
                className="w-full h-64 md:h-full object-cover transition-opacity duration-500"
              />

              {/* Overlay with name & position */}
              {/* <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6 md:p-8">
                <div>
                  <h2 className="text-2xl md:text-3xl font-bold text-white mb-2">
                    {localizedName(item.employeeName) || t("Office Head")}
                  </h2>
                  <p className="text-gray-200 text-lg">
                    {localizedName(item.employeePosition) || ""}
                  </p>
                </div>
              </div> */}
            </div>

            {/* Message Content Section */}
            <div className="md:w-3/5 p-6 md:p-8 flex flex-col justify-center">
              <div className="mb-6">
                <div className="flex items-center mb-6">
                  <div className="w-10 h-1 bg-primary-600 mr-3"></div>
                  <h3 className="text-lg font-semibold text-primary-600 uppercase tracking-wide">
                    {localizedName(item.messageTitle) ||
                      t("Leadership Message")}
                  </h3>
                </div>

                {/* Localized Message Content */}
                <div className="min-h-[200px] flex items-center">
                  <p className="text-gray-700 text-lg leading-relaxed">
                    {localizedName(item.messageContent) ||
                      t("No content available")}
                  </p>
                </div>
              </div>

              {/* Status Section */}
              <div className="mt-8 flex justify-end items-center gap-3 border-t pt-4">
                <span className="text-sm font-medium text-gray-700">
                  {t("Status")}:
                </span>
                <span
                  className={`px-4 py-2 text-sm font-semibold rounded-full ${
                    item.isActive
                      ? "bg-primary-100 text-primary-700"
                      : "bg-gray-200 text-gray-600"
                  }`}>
                  {item.isActive ? t("Active") : t("Inactive")}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
