'use client';
import React from "react";
import {Code2, Copyright, Info, Laptop, Tag} from 'lucide-react';
import {configs} from "@/lib/configs";
import {useTranslations} from '@/lib/i18n';
import Modal from "@/components/ui/Modal";
import DetailField from "@/components/ui/DetailField";
import Badge from "@/components/ui/Badge";

interface AboutEditorsProps {
    onClose: () => void;
}

export default function AboutEditors({onClose}: AboutEditorsProps) {
    const t = useTranslations();

    const appInfo = {
        name: configs.appName,
        version: configs.appVersion,
        copyright: t("aboutEditors.copyright"),
        description: t("aboutEditors.description"),
        developers: [t("aboutEditors.teamMember")],
        technologies: [
            "TypeScript", "NextJS", "NodeJS", "Fastify", "TailwindCSS", "TipTap"
        ]
    };

    return (
        <Modal icon={Info} title={t("aboutEditors.title")} onClose={onClose} size="sm">
            <div className="flex flex-col items-center mb-2">
                <h3 className="text-2xl font-['ADLaM_Display'] text-primary">{appInfo.name}</h3>
            </div>
            
            <DetailField icon={Tag} label={t("aboutEditors.version")} value={appInfo.version}
                         preserveWhitespace={false}/>
            <DetailField icon={Copyright} label={t("aboutEditors.copyrightLabel")} value={appInfo.copyright}
                         preserveWhitespace={false}/>
            <DetailField icon={Info} label={t("aboutEditors.descriptionLabel")} value={appInfo.description}
                         preserveWhitespace={false}/>
            
            <div className="p-5 bg-secondary rounded-xl">
                <div className="flex items-center gap-2 mb-3">
                    <Laptop className="w-4 h-4 text-primary" strokeWidth={1.75}/>
                    <h3 className="text-text-primary font-semibold">{t("aboutEditors.teamLabel")}</h3>
                </div>
                <ul className="text-text-primary">
                    {appInfo.developers.map((dev: string, index: number) => (
                        <li key={index}>{dev}</li>
                    ))}
                </ul>
            </div>
            
            <div className="p-5 bg-secondary rounded-xl">
                <div className="flex items-center gap-2 mb-3">
                    <Code2 className="w-4 h-4 text-primary" strokeWidth={1.75}/>
                    <h3 className="text-text-primary font-semibold">{t("aboutEditors.techLabel")}</h3>
                </div>
                <div className="flex flex-wrap gap-2">
                    {appInfo.technologies.map((tech: string, index: number) => (
                        <Badge key={index} variant="primary" size="md">{tech}</Badge>
                    ))}
                </div>
            </div>
        </Modal>
    );
}