import { useTranslation } from "react-i18next";
import LineIcon from "~/components/LineIcon";
import { usePageTitle } from "~/contexts/PageTitleContext";
import { VIGO_LINES } from "~/data/LinesData";
import '../tailwind-full.css';

export default function LinesPage() {
    const { t } = useTranslation();
    usePageTitle(t("navbar.lines", "Líneas"));

    return (
        <div className="container mx-auto px-4 py-6">
            <p className="mb-6 text-gray-700 dark:text-gray-300">
                {t("lines.description", "A continuación se muestra una lista de las líneas de autobús urbano de Vigo con sus respectivas rutas y enlaces a los horarios oficiales.")}
            </p>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {VIGO_LINES.map((line) => (
                    <a
                        key={line.lineNumber}
                        href={line.scheduleUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow border border-gray-200 dark:border-gray-700"
                    >
                        <LineIcon line={line.lineNumber} mode="rounded" />
                        <div className="flex-1 min-w-0">
                            <p className="text-sm md:text-md font-semibold text-gray-900 dark:text-gray-100">
                                {line.routeName}
                            </p>
                        </div>
                    </a>
                ))}
            </div>
        </div>
    );
}