'use client'
import React from 'react'
import Link from 'next/link'
import type { Page } from '../../payload-types'
import { ArrowRight } from 'lucide-react'

type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'servicesList' }>

export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
  return (
    <section className="py-20 md:py-32 bg-background text-foreground">
      <div className="container-premium">
        <div className="max-w-3xl mb-16 md:mb-24">
          <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
            // Usługi
          </div>
          <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight max-w-2xl text-balance">
            {title}
          </h2>
        </div>

        <div className="border-t border-border">
          {services?.map((service: NonNullable<Props['services']>[0], index: number) => (
            <div 
              key={service.id || index}
              className="group border-b border-border py-8 md:py-12 flex flex-col md:flex-row gap-6 md:gap-12 lg:gap-24 items-start md:items-center hover:bg-foreground/[0.02] transition-colors"
            >
              <div className="md:w-1/3 shrink-0">
                <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground group-hover:text-accent transition-colors">
                  {service.title}
                </h3>
              </div>
              <div className="md:w-7/12 flex-grow">
                <p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
                  {service.description}
                </p>
              </div>
              <div className="md:w-1/12 flex justify-end shrink-0">
                <Link 
                  href="/uslugi"
                  className="flex items-center gap-3 text-foreground font-semibold hover:text-accent transition-colors"
                >
                  <span className="md:hidden">{service.linkText}</span>
                  <div className="w-12 h-12 rounded-full border border-border flex items-center justify-center group-hover:border-accent group-hover:bg-accent/5 transition-all">
                    <ArrowRight className="w-5 h-5 group-hover:translate-x-0.5 transition-transform" />
                  </div>
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}