import { TFunction } from "i18next";

export const CustomDocker = ({ t }: { t: TFunction }) => {
    return (
        <div className="mt-4">
            <div className="mt-8 space-y-8">
                <header className="border-b border-secondary/10 pb-4">
                    <h2 className="text-2xl font-semibold text-secondary mb-2">{t('experience.customs.docker.title')}</h2>
                    <p className="text-secondary/60">{t('experience.customs.docker.subtitle')}</p>
                </header>

                <section className="space-y-4">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.docker.overview.title')}</h3>
                    <p className="text-secondary/70">{t('experience.customs.docker.overview.description')}</p>
                    <p className="text-secondary/70">{t('experience.customs.docker.overview.problem')}</p>
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.docker.architecture.title')}</h3>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.docker.architecture.services.title')}</h4>
                        <ul className="space-y-2 text-secondary/70">
                            <li className="flex gap-2">
                                <span className="font-semibold text-accent">Apache/PHP 8.2:</span>
                                <span>{t('experience.customs.docker.architecture.services.php')}</span>
                            </li>
                            <li className="flex gap-2">
                                <span className="font-semibold text-accent">MySQL:</span>
                                <span>{t('experience.customs.docker.architecture.services.mysql')}</span>
                            </li>
                            <li className="flex gap-2">
                                <span className="font-semibold text-accent">PhpMyAdmin:</span>
                                <span>{t('experience.customs.docker.architecture.services.phpmyadmin')}</span>
                            </li>
                        </ul>
                    </div>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.docker.architecture.features.title')}</h4>
                        <ul className="list-disc list-inside space-y-2 text-secondary/70">
                            <li>{t('experience.customs.docker.architecture.features.dependencies')}</li>
                            <li>{t('experience.customs.docker.architecture.features.repos')}</li>
                            <li>{t('experience.customs.docker.architecture.features.devcontainer')}</li>
                            <li>{t('experience.customs.docker.architecture.features.apache')}</li>
                            <li>{t('experience.customs.docker.architecture.features.vhosts')}</li>
                            <li>{t('experience.customs.docker.architecture.features.php_config')}</li>
                        </ul>
                    </div>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.docker.architecture.devcontainer.title')}</h4>
                        <p className="text-secondary/70">{t('experience.customs.docker.architecture.devcontainer.description')}</p>
                        <ul className="list-disc list-inside space-y-2 text-secondary/70 text-sm">
                            <li>{t('experience.customs.docker.architecture.devcontainer.debugging')}</li>
                            <li>{t('experience.customs.docker.architecture.devcontainer.composer')}</li>
                            <li>{t('experience.customs.docker.architecture.devcontainer.terminal')}</li>
                        </ul>
                    </div>
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.docker.challenges.title')}</h3>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-2">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.docker.challenges.modules.title')}</h4>
                        <p className="text-secondary/70">{t('experience.customs.docker.challenges.modules.description')}</p>
                    </div>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-2">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.docker.challenges.standardization.title')}</h4>
                        <p className="text-secondary/70">{t('experience.customs.docker.challenges.standardization.description')}</p>
                    </div>

                    <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-2">
                        <h4 className="text-lg font-medium text-secondary">{t('experience.customs.docker.challenges.automation.title')}</h4>
                        <p className="text-secondary/70">{t('experience.customs.docker.challenges.automation.description')}</p>
                    </div>
                </section>

                <section className="space-y-6">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.docker.stack.title')}</h3>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                            <h4 className="text-lg font-medium text-secondary">{t('experience.customs.docker.stack.core.title')}</h4>
                            <ul className="space-y-2 text-secondary/70 text-sm">
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Docker & Docker Compose</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Apache 2.4</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>PHP 8.2</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>MySQL / MariaDB</span>
                                </li>
                            </ul>
                        </div>

                        <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                            <h4 className="text-lg font-medium text-secondary">{t('experience.customs.docker.stack.tools.title')}</h4>
                            <ul className="space-y-2 text-secondary/70 text-sm">
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>PhpMyAdmin</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Composer</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>XDebug</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Bitbucket (SSH)</span>
                                </li>
                            </ul>
                        </div>

                        <div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
                            <h4 className="text-lg font-medium text-secondary">{t('experience.customs.docker.stack.vscode.title')}</h4>
                            <ul className="space-y-2 text-secondary/70 text-sm">
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Dev Containers</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Remote Explorer</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="text-accent mt-1">•</span>
                                    <span>Docker Extension</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>

                <section className="space-y-4">
                    <h3 className="text-xl font-semibold text-accent">{t('experience.customs.docker.results.title')}</h3>
                    <ul className="space-y-2 text-secondary/70">
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.docker.results.standardization')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.docker.results.onboarding')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.docker.results.debugging')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.docker.results.flexibility')}</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="text-accent mt-1">✓</span>
                            <span>{t('experience.customs.docker.results.productivity')}</span>
                        </li>
                    </ul>
                </section>

                <footer className="border-t border-secondary/10 pt-6">
                    <p className="text-sm text-secondary/60 italic">{t('experience.customs.docker.tags')}</p>
                </footer>
            </div>
        </div>
    );
};
