import React from 'react';
import './HomeView.css';

function HomeView({ onScanClick, onSearchClick }) {
  return (
    <div className="home-view">
      <div className="home-hero">
        <div className="home-logo-wrapper">
          <img src="/farmaclic_logo_home.png" alt="FarmaClic" className="home-logo" />
          <img src="/farmaclic_text.png" alt="FarmaClic" className="home-brand-name" />
        </div>
        <p className="home-desc">Encuentra tus medicamentos en farmacias cercanas</p>
      </div>

      <div className="home-cards">
        <button className="home-card home-card--search" onClick={onSearchClick}>
          <div className="home-card-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="11" cy="11" r="7" />
              <path d="m20 20-3.5-3.5" />
            </svg>
          </div>
          <div className="home-card-text">
            <span className="home-card-label">Buscar Medicamento</span>
            <span className="home-card-arrow">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="9 18 15 12 9 6" />
              </svg>
            </span>
          </div>
        </button>

        <button className="home-card home-card--scan" onClick={onScanClick}>
          <div className="home-card-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 7V5a2 2 0 0 1 2-2h2" />
              <path d="M17 3h2a2 2 0 0 1 2 2v2" />
              <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
              <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
              <path d="M7 8v8M11 8v8M15 8v8M19 8v8" />
            </svg>
          </div>
          <div className="home-card-text">
            <span className="home-card-label">Escanear TSI</span>
            <span className="home-card-arrow">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="9 18 15 12 9 6" />
              </svg>
            </span>
          </div>
        </button>
      </div>
    </div>
  );
}

export default HomeView;