import React from 'react';
import { FeatureCard } from 'xertica-ui/blocks';
import { Header } from 'xertica-ui/layout';
import { useLayout } from 'xertica-ui/hooks';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { LayoutTemplate } from 'lucide-react';

/**
 * Home page content — starter placeholder.
 *
 * Replace this with your own home page content. Keep the `Header` +
 * `useLayout()` wiring below if you want the sidebar-aware layout to keep
 * working; everything inside `<main>` is yours to redesign.
 */
export function HomeContent() {
  const { t } = useTranslation();
  const { sidebarExpanded, sidebarWidth } = useLayout();
  const navigate = useNavigate();

  return (
    <div
      style={{
        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
      }}
      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
    >
      <Header
        showThemeToggle={true}
        showLanguageSelector={true}
        breadcrumbs={[{ label: t('nav.designSystem'), href: '/home' }, { label: t('nav.home') }]}
        renderLink={(href: string, props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
          <Link to={href} {...props} />
        )}
      />

      <main className="flex-1 overflow-hidden bg-muted">
        <div className="h-full" style={{ overflowY: 'auto', overflowX: 'hidden' }}>
          <div className="p-5 sm:p-4 md:p-6">
            <div className="max-w-6xl mx-auto space-y-8">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tight">{t('home.welcome')}</h2>
                <p className="text-muted-foreground">{t('home.subtitle')}</p>
              </div>

              {/* Replace this with your own home page content */}
              <FeatureCard
                className="max-w-xs"
                icon={<LayoutTemplate />}
                title={t('home.templateCliTitle')}
                description={t('home.templateCliDescription')}
                actionLabel={t('common.view')}
                onAction={() => navigate('/template')}
              />
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}