'use client';

import { useState, useEffect } from 'react';

export default function ServicesList() {
  // Static services data
  const services = [
    {
      id: 1,
      title: "Web Development",
      description: "Custom web applications built with modern technologies",
      slug: "web-development",
      icon: "code",
      price: 2500,
      featured: true,
      display_order: 1,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 2,
      title: "Mobile Apps",
      description: "Native and cross-platform mobile applications",
      slug: "mobile-apps",
      icon: "phone",
      price: 3500,
      featured: false,
      display_order: 2,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    }
  ];

  const handleDeleteService = (id: number) => {
    if (!confirm('Are you sure you want to delete this service?')) {
      return;
    }
    // Note: This is a demo - in a real app, you'd handle deletion differently
    console.log('Service deletion requested for ID:', id);
  };


  return (
    <div className="container py-5">
      <div className="row">
        <div className="col-12">
          <h2 className="mb-4">Our Services</h2>
          <div className="row">
            {services.map((service) => (
              <div key={service.id} className="col-md-6 col-lg-4 mb-4">
                <div className="card h-100">
                  <div className="card-body">
                    <div className="d-flex justify-content-between align-items-start mb-3">
                      <h5 className="card-title">{service.title}</h5>
                      {service.featured && (
                        <span className="badge bg-primary">Featured</span>
                      )}
                    </div>
                    <p className="card-text">{service.description}</p>
                    <div className="mt-auto">
                      <a 
                        href={`/services/${service.slug}`} 
                        className="btn btn-primary me-2"
                      >
                        Learn More
                      </a>
                      <button 
                        className="btn btn-outline-danger btn-sm"
                        onClick={() => handleDeleteService(service.id)}
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          
        </div>
      </div>
    </div>
  );
}