'use client';

import { motion } from 'framer-motion';
import { useEnVista } from '@/lib/motion';
import { BARRAS_SIMBOLO } from '@/lib/simbolo';

// The manual's own description of the ≡ symbol, made literal: "las líneas van
// de muchas/desordenadas (complejidad) a pocas/alineadas (claridad)". Five
// uneven bars resolve, once in view, into the three clean aligned bars of the
// official icon (see app/icon.svg) — decorative, one-shot, never loops.
const FINAL = BARRAS_SIMBOLO;

const BARS = [
  { from: { x: 6, y: 9, width: 22, height: 6, opacity: 0.9 }, to: FINAL[0] },
  { from: { x: 36, y: 15, width: 16, height: 5, opacity: 0.45 }, to: { x: 44, y: 17, width: 8, height: 5, opacity: 0 } },
  { from: { x: 16, y: 25, width: 30, height: 7, opacity: 0.9 }, to: FINAL[1] },
  { from: { x: 8, y: 37, width: 14, height: 5, opacity: 0.45 }, to: { x: 12, y: 39, width: 8, height: 5, opacity: 0 } },
  { from: { x: 20, y: 45, width: 26, height: 6, opacity: 0.9 }, to: FINAL[2] },
];

export function SimboloTresLineas({ className = '' }: { className?: string }) {
  const { ref, enVista, reduced } = useEnVista();

  return (
    <svg ref={ref} viewBox="0 0 64 64" className={className} aria-hidden="true" focusable="false">
      {BARS.map((bar, i) =>
        reduced ? (
          <rect key={i} {...bar.to} opacity={i === 1 || i === 3 ? 0 : 1} rx={1.5} fill="currentColor" />
        ) : (
          <motion.rect
            key={i}
            rx={1.5}
            fill="currentColor"
            initial={bar.from}
            animate={enVista ? bar.to : bar.from}
            transition={{ duration: 0.7, delay: i * 0.08, ease: [0.22, 1, 0.36, 1] }}
          />
        ),
      )}
    </svg>
  );
}