import { Link } from 'react-router-dom';
import { RtText } from '@dpa/react-text';
import { routes } from '../../router';
import { RtFrame } from '@dpa/react-frame-intro';
import { useRef } from 'react';
import { PlusTypographyIcon } from '@dpa/react-typography-icons';
import { RtButton } from '@dpa/react-buttons';

export function Home() {
  const ref = useRef<HTMLInputElement>(null);

  return (
    <RtFrame
      surface="foundation-low-tint"
      use="primary"
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '16px',
        padding: '16px',
        minHeight: '100vh',
      }}
      ref={ref}
    >
      <RtText typography="headline-sm-bold">Ritm Intro</RtText>
      <RtText typography="headline-sm-bold">Components:</RtText>
      {routes
        .filter((r) => r.id !== 'Home')
        .map((r) => (
          <RtText typography="symbol-md-secondary" key={r.id}>
            <Link to={r.path} style={{ color: 'currentColor' }}>
              {r.id}
            </Link>
          </RtText>
        ))}
    </RtFrame>
  );
}