import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Info } from "lucide-react";

export function StationInfoView() {
  const stationInfo = [
    { label: "Station ID", value: "STN-001" },
    { label: "Location", value: "North Sector A" },
    { label: "Latitude", value: "14.5995° N" },
    { label: "Longitude", value: "120.9842° E" },
    { label: "Altitude", value: "15 m" },
    { label: "Installation Date", value: "2024-01-15" },
    { label: "Last Maintenance", value: "2026-02-20" },
    { label: "Serial Number", value: "DS-2024-001-A" },
  ];

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <Info className="w-6 h-6 text-blue-400" />
        <h1 className="text-2xl font-bold text-white">Station Information</h1>
      </div>

      <Card className="bg-gray-900 border-gray-700">
        <CardHeader>
          <CardTitle className="text-white">Station Details</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 gap-4">
            {stationInfo.map((info) => (
              <div key={info.label} className="p-3 bg-gray-800 rounded">
                <div className="text-xs text-gray-400 mb-1">{info.label}</div>
                <div className="text-sm text-white font-semibold">{info.value}</div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}