import { Link } from 'react-router';
import { useTranslation } from 'react-i18next';
import { EmptyState } from '../../components/common/EmptyState';

/** `*` — 404. Lives inside AppShell so the sidebar/player stay visible. */
export function NotFoundPage() {
  const { t } = useTranslation();
  return (
    <div style={{ padding: '1.5rem' }}>
      <EmptyState
        title={t('notFound.title')}
        description={t('notFound.description')}
      />
      <div style={{ textAlign: 'center', marginTop: '1rem' }}>
        <Link to="/library" style={{ color: 'var(--color-accent)' }}>
          {t('notFound.backToLibrary')}
        </Link>
      </div>
    </div>
  );
}