import { Grid, GridDetailRowProps } from "@progress/kendo-react-grid";

const AddressSection = ({ shipAddress }: any) => (
  <section style={{ width: "200px", float: "left" }}>
    <p>
      <strong>Street:</strong> {shipAddress?.street}
    </p>
    <p>
      <strong>City:</strong> {shipAddress?.city}
    </p>
    <p>
      <strong>Country:</strong> {shipAddress?.country}
    </p>
    <p>
      <strong>Postal Code:</strong> {shipAddress?.postalCode}
    </p>
  </section>
);

const DetailComponent = (props: GridDetailRowProps) => {
  const dataItem = props.dataItem;
  return (
    <div>
      <AddressSection shipAddress={dataItem.shipAddress} />
      <Grid style={{ width: "500px" }} data={dataItem.details} />
    </div>
  );
};

export default DetailComponent;
